Dette vil gjøre deg bra i disse dager (IE 8 og oppover):
.group:after ( content: ""; display: table; clear: both; )Bruk den på ethvert overordnet element der du trenger å rydde flottørene. For eksempel:
Du vil bruke dette i stedet for å rydde flottøren med noe som overflow: hidden;på foreldrene (du vil ikke alltid skjule overløp ).
Nå for litt historie!
Dette var den originale populære versjonen, designet for å støtte nettlesere så langt tilbake som mulig:
.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 */Det ble da dokumentert litt av en renere versjon her av Jeff Starr, basert på det faktum at ingen bruker IE for Mac, og det var det backslash hacket handlet 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 */Så ble det populært å bruke “gruppe” som et klassenavn, som er finere og mer semantisk (via Dan Cederholm). Også contentgjør eiendommen ikke engang trenger plassen, kan det være tom streng (via Nicolas Gallagher). Da, uten tekst, font-sizeer ikke nødvendig (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 slipper støtte for IE 6 eller 7, fjerner du selvfølgelig de tilknyttede linjene.
Oppdater 18. mai 2011: Nicolas Gallagher igjen med “micro” clearfix. Se også disse ekstra tingene..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Se toppen av denne siden for den mest moderne versjonen av clearfix.
I fremtiden kan vi kanskje gjøre:
.group ( display: flow-root; )