clearfix hack corect

Lecția pentru a corecta clearfix utilizare hack.

Eu folosesc un clearfix hack la toate site-urile lor. Acesta este încă cunoscut sub numele de «Easy Clearing Hack» - utilizat pentru fluxul de bloc de curățare (div) fără marcaj structural. Este foarte eficient în abordarea aspect și browser-ul inconsecvențele, fără a fi nevoie să se amestece cu structura de prezentare. De-a lungul ultimilor ani, am luat act de un număr de octeți de informații utile în ceea ce privește metoda de «Easy Clear». În acest articol, vreau să colecteze toate aceste lecții cu privire la versiunea extinsă a clearfix CSS hack.

Folosiți spații în loc de un punct, pentru a preveni schimbarea de plasare.

Aici este punerea în aplicare a acestui hack, așa cum este prezentat într-unul din articolele originale care descriu metoda:

Notă linia care conține proprietatea de conținut: „“;. Am constatat că punctul în ghilimele are o tendinta de urât la perturbarea schimbare de cazare. Când adăugați punct literal după .clearfix unitate (de exemplu, în cadrul, prin .clearfix: după selectorul) generează hack o eroare în unele browsere. Și nu doar pentru Internet Explorer - în funcție de locație, chiar Firefox va toci după o excursie: după - pe baza unei pseudo-punct. Ai nevoie de o soluție pentru această mizerie? Conținut:: indicați spre un spațiu simplu Înlocuiți »«; - acest truc sa dovedit a fi destul de succes, eu folosesc acum această proprietate în toate sale clearfix-ah.

Adăugați o proprietate zero, font-size pentru a face totul buna.

O altă incompatibilitate ciudat văzut în clearfix-e - locația se pierde atunci când proprietatea CSS font-size. situat în hack ustanavlivaetsya la zero:

Desigur, este posibil să nu fie necesară atunci când se utilizează spații în loc de caracter „punct“ (așa cum este descris mai sus), dar, sincer, nu-ți face griji. Privind înapoi, cred că poate fi pentru a face această decizie înainte de deschiderea unui spațiu fix. Cu toate acestea, unele browsere se ocupe de spațiu ca text, astfel încât să poată fi în continuare util. Poate că da, poate că nu - am de gând să-l arunca la tine toate CSS-guru.

Feriți-vă de dezinformare cu privire la această metodă.

Nu, nu încerc să obosească sfaturile oferite în acest articol - veți vedea că acestea sunt destul de inofensive. În schimb, mă refer la informațiile eronate găsite în altă parte pe internet sau chiar și în formă tipărită. Aici este o prezentare a clearfix hack, descris în cartea de excelenta «CSS Hack Joseph W. Lowery lui # 038; Filtre »:

Ouch! Vedeți problema? De fapt, aici 2 probleme potențiale .clearItem Dl. lui Lowery. Prima problemă: utilizarea unor valori depășite în proprietate de afișare în linie în mijlocul Declarația .clearItem:

așa cum sa discutat în articolul original, valoarea trebuie să fie în linie-bloc - flux fix pentru IE / Mac:

A doua problemă: Mr. lui Lowery includ * html .clearItem * selectorul în următoarea linie:

Și acum toate împreună ...

Pune toate împreună și se combină aceste lecții cu versiunea originală (dreapta) a «Easy Clear Metoda», vom vedea - o soluție complet funcțională hack clearfix:

și filmat! Sper că ai avut la fel de distractiv ca am facut in timp ce scriu acest articol. dacă nu, sper că în această rundă de „lecții învățate“ sunt câteva informații utile despre clearfix hack omniprezentă și util.

Și, în sfârșit - acest post este dedicat CSS și nu mă aștept la nimic bun, numai cei mai severi critici ale ideilor prezentate în acest document. - Du-te înainte, tot ce nebun CSS-cap)))!

(Nu a fost evaluat încă)