Experiența de a folosi css hack clearfix
Folosind un spațiu în loc de o structură de document previne încălcarea.
Să ne uităm la forma originală a hack clearfix, utilizat anterior de facto, care este reprezentat într-una din sursele originale ale acestei metode:
clearfix: după conținut: ""
display: block;
înălțime: 0;
clar: ambele;
vizibilitate: ascunse;
>
Să acorde o atenție la valoarea proprietății de conținut. Am observat că utilizarea „“ ca valoare pentru proprietatea respectivă, în unele cazuri, aceasta duce la o perturbare a structurii vizuale a documentelor. Acest lucru se datorează faptului că utilizarea unui astfel de cod, după blocul căruia i se aplică clasei .clearfix (datorită utilizării elementului pseudo .clearfix: după) generează un element bloc suplimentar (afișaj: bloc), care conține punctul respectiv unele browsere poticnire bloc. Și nu este vorba doar de Internet Explorer, și în anumite circumstanțe, în funcție de aspectul paginii generate de un pseudo-punct poate cauza probleme și va afișa un document în Firefox. Pentru a exclude astfel de situații este necesar să se înlocuiască valoarea conținutului: „“ spațiu pe conținut semn: „“. Rezultatul acestei proceduri a fost testat și funcționează bine în toate browserele. L folosesc cu succes la crearea unei .clearfix clasă în toate proiectele lor. Ca urmare, avem:
/ * Scoateți punctul și înlocuiți-l cu un spațiu * /
.clearfix: după conținut: "";
display: block;
înălțime: 0;
clar: ambele;
vizibilitate: ascunse;
>
.
.
.
Pentru a finaliza ordinul zero din valoarea înălțimii fontului.
Un alt punct de rău, care este asociat cu compatibilitate este rezolvată prin adăugarea unei proprietăți Fragment font-size, urmat de valorile sale de reglare la zero:
/ * Zero valoarea înălțimii fontului elimina potențialele probleme * /
.clearfix: după conținut: "";
display: block;
înălțime: 0;
clar: ambele;
vizibilitate: ascunse;
font-size: 0;
>
.
.
.
Pentru unii poate părea că după îmbunătățirea anterioară (punctul de substituție printr-un spațiu), această măsură de precauție este necesară (* De obicei, browserele ignora spațiile toate suplimentare. Dar, în acest caz, într-adevăr, ceea ce elimină complet posibilitatea de generare a oricărui text ) .. Dar eu personal nu-mi pasă, pentru că eu sunt un susținător al ideii de a folosi orice metode în care se ocupă cu compatibilitate cross-browser și proiectele sale. Și poate că ar trebui să folosească această metodă înainte de a am rezolvat problema cu valorile de înlocuire pentru proprietățile de conținut. Linia de jos este că nu există nici o garanție că orice browser nu va trata spațiul gol ca o bucată de text, deci este metoda redundantă pentru a elimina această posibilitate. Iar problema justificării sale lăsate la guru caietul de sarcini CSS.
Nu utilizați codul de luat de la o sursă de încredere.
De asemenea luate în considerare în acest articol defecte ale originalului clearfix cod hack, care după procedurile noastre au devenit evidente, există mai multe surse, atât online cât și în diverse medii de imprimare, în cazul în care puteți găsi nu este destul de corect codul de versiune clearfix. Ca un exemplu, să ia o atenție decentă carte J.W. Lowery - «CSS Hack # 038; Filtre ». Iată ce conține:
clearItem: după conținut.
clar: ambele;
înălțime: 0;
vizibilitate: ascunse;
display: block;
>
* HTML .clearItem, html * .clearItem *
.clearItem
/ * Închide A comentat Backslash Hack * /
Poți să te determina zonele cu probleme în prezentul cod. De fapt, în acest clearItem hack conține două erori. Primul este de a utiliza valori incorecte pentru proprietățile de afișare inline, în medie, de regulă CSS selectorul de c .clearItem. Această întrebare a fost ridicată mai devreme în articolul original. în cazul în care ca și valorile pentru proprietățile ecranului, în acest caz, se recomandă să se utilizeze inline-block. care anulează înveliți în IE pentru Macintosh:
Dl Lowery a doua omisiune în hack lui cleaItem - prezența unui selector * html .clearItem * în linia următoare:
* HTML .clearItem, html * .clearItem * * HTML .clearItem, html * .clearItem *După îndepărtarea tuturor care a căzut în loc.
Ce concluzie se poate trage din aceasta? Este foarte simplu - dublu verificați codul și nu caută cea mai ușoară cale spre succes, ceea ce poate duce la un rezultat complet diferit. amintiți-vă constant că a greși este uman, și chiar și programatori profesioniști și dezvoltatorii pot face o greșeală. Deci, fii atent, dacă utilizați convențional copy-paste codul în vederea utilizării ulterioare în proiectele lor.
Acum toate împreună.
Luând în considerare toate punctele de mai sus și de a face ajustările corespunzătoare la versiunea originală a hack Easy Clear Metoda, obținem următoarele caracteristici complete cod clearfix:
/ * Puțin modificată, clearfix versatil hack * /
.clearfix: după vizibilitate: ascunse;
display: block;
font-size: 0;
conținut: "";
clar: ambele;
înălțime: 0;
>
.clearfix
/ * Start a comentat backslash hack \ * /
* HTML .clearfix
.clearfix
/ * Închide a comentat backslash hack * /
Asta e tot. Sper că codul de mai sus în acest articol cel mai popular universal hack clearfix și informații de însoțire va face bine.
* Mai multe informații despre acest subiect pot fi găsite într-un articol de Chris Koyera - anularea automată a copiilor ambalaj.
Ne pare rău dacă pune-l grosolan.
Despre CMS nu este încă înțeles în topul plătit ambalate CMS, nu ceea ce nu-mi amintesc, încă se dovedește că culegătorie primul aspect pentru a face să funcționeze în toate browserele care doresc client, și apoi, în acest aspect adăugați module CMS care se află gestiona confortabil site-ul, nici măcar acele condimente.
Sau sunt eu în spatele ori și acum este diferit?
În WordPress, care rulează paginile site-ul meu sunt generate din flota în așa fel cum este prevăzut pentru sistem. Relevant este stilurile necesare sunt actualizate automat în fișierul style.css. În scopul de stiluri creează un fișier separat și elementele necesare comportă modul în care am nevoie.
Mi se pare că este prea devreme holivar cu privire la utilizarea flotelor. nu face fără ei acum ... Chiar dacă am încerca să lucreze priminyat-le cât mai puțin posibil. utilizează tot mai mult de afișare inline-block, masa de afișare etc. box-dimensionare de frontieră-box priminyayu, în cele mai multe cazuri. Pe un subiect. Și cum te simți în legătură cu această decizie pentru clearfix
clearfix: după,
.clearfix: înainte de conținut: »;
afișare: tabel;
lățime: 100%;
clar: ambele;
>