V týchto dňoch vám bude dobre (IE 8 a vyšší):
.group:after ( content: ""; display: table; clear: both; )Použite ho na akýkoľvek nadradený prvok, v ktorom musíte vyčistiť plaváky. Napríklad:
Použili by ste to namiesto toho, aby ste vyčistili plavák niečím ako overflow: hidden;v rodiči (nie vždy chcete skryť pretečenie) ).
Teraz trochu histórie!
Toto bola pôvodná populárna verzia navrhnutá tak, aby čo najviac podporovala prehliadače:
.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 */Potom tu bol trochu čistejšia verzia, ktorú tu zdokumentoval Jeff Starr, a to na základe skutočnosti, že nikto nepoužíva IE pre Mac, o čom bol backslash hack.
.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 */Potom sa stalo populárnym používať „skupina“ ako názov triedy, ktorý je príjemnejší a sémantickejší (prostredníctvom Dana Cederholma). Tiež contentvlastnosť ani nepotrebuje priestor, môže byť prázdny reťazec (cez Nicolas Gallagher). Potom nie font-sizeje potrebný žiadny text (Chris Coyier).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Samozrejme, ak upustíte od podpory IE 6 alebo 7, odstráňte príslušné riadky.
Aktualizácia 18. mája 2011: Nicolas Gallagher opäť s „mikro“ clearfixom. Prečítajte si aj tieto ďalšie informácie..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Najmodernejšiu verziu verzie clearfix nájdete v hornej časti tejto stránky.
V budúcnosti by sme mohli urobiť:
.group ( display: flow-root; )