V těchto dnech vám bude dobře (IE 8 a vyšší):
.group:after ( content: ""; display: table; clear: both; )Použijte jej na jakýkoli nadřazený prvek, ve kterém potřebujete vymazat plováky. Například:
Použili byste to místo toho, abyste vyčistili plovák s něčím jako overflow: hidden;na rodiče (ne vždy chcete skrýt přetečení ).
Nyní pro trochu historie!
Jednalo se o původní populární verzi navrženou pro podporu prohlížečů co nejdále:
.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 */Jeff Starr zde zdokumentoval trochu čistší verzi, založenou na skutečnosti, že nikdo nepoužívá IE pro Mac, o čemž byl 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 */Poté se stalo populárním používat „group“ jako název třídy, který je hezčí a sémantičtější (prostřednictvím Dana Cederholma). Také contentvlastnost ani nepotřebuje prostor, může být prázdný řetězec (přes Nicolas Gallagher). Pak je bez textu font-sizezbytečné (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 */Samozřejmě, pokud upustíte podporu IE 6 nebo 7, odeberte související řádky.
Aktualizace 18. května 2011: Nicolas Gallagher znovu s „mikro“ clearfixem. Podívejte se také na tyto další věci..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )V horní části této stránky najdete nejmodernější verzi clearfixu.
V budoucnu budeme možná schopni:
.group ( display: flow-root; )