Dette vil gøre dig fint i disse dage (IE 8 og op):
.group:after ( content: ""; display: table; clear: both; )Anvend det på ethvert overordnet element, hvor du har brug for at rydde flyderne. For eksempel:
Du vil bruge dette i stedet for at rydde svømmeren med noget som overflow: hidden;på forældren (du vil ikke altid skjule overløb ).
Nu for lidt historie!
Dette var den originale populære version designet til at understøtte browsere så langt tilbage som det muligvis kunne:
.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 */Der var derefter lidt af en renere version dokumenteret her af Jeff Starr, baseret på det faktum, at ingen bruger IE til Mac, hvilket er, hvad backslash hack handlede om.
.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 */Derefter blev det populært at bruge “gruppe” som et klassenavn, som er pænere og mere semantisk (via Dan Cederholm). Også, contentejendommen har ikke engang brug for pladsen, den kan være tom streng (via Nicolas Gallagher). Så uden tekst font-sizeer det ikke nødvendigt (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 */Hvis du dropper IE 6 eller 7 support, skal du selvfølgelig fjerne de tilknyttede linjer.
Opdatering 18. maj 2011: Nicolas Gallagher igen med “micro” clearfix. Se også disse ekstra ting..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Se toppen af denne side for den mest moderne version af clearfix.
I fremtiden kan vi muligvis gøre:
.group ( display: flow-root; )