Tai padės jums gerai šiomis dienomis (IE 8 ir naujesnės versijos):
.group:after ( content: ""; display: table; clear: both; )Taikykite jį bet kuriam pagrindiniam elementui, kuriame turite išvalyti plūdes. Pavyzdžiui:
Jūs naudosite tai vietoj to, kad overflow: hidden;į tėvus (ne visada norite slėpti perpildymą ).
Dabar šiek tiek istorijos!
Tai buvo originali populiari versija, sukurta palaikyti naršykles kiek įmanoma atgal:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Tada buvo šiek tiek švaresnė versija, kurią čia dokumentavo Jeffas Starras, remdamasis tuo, kad niekas nenaudoja „IE“, skirtos „Mac“.
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Tada tapo populiaru naudoti „grupę“ kaip klasės pavadinimą, kuris yra gražesnis ir prasmingesnis (per Daną Cederholmą). Be to, contentnuosavybei net nereikia vietos, ji gali būti tuščia eilutė (per Nicolasą Gallagherį). Tada be jokio teksto font-sizenebereikia (Chrisas Coyieris).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Žinoma, jei atsisakote IE 6 ar 7 palaikymo, pašalinkite susijusias eilutes.
Atnaujinta 2011 m. Gegužės 18 d .: Nicolasas Gallagheris dar kartą naudodamas „micro“ clearfix. Taip pat žiūrėkite šiuos papildomus dalykus..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Žr. Šio puslapio viršuje pateiktą naujausią „clearfix“ versiją.
Ateityje galbūt galėsime tai padaryti:
.group ( display: flow-root; )
