Detta kommer att göra dig bra i dessa dagar (IE 8 och uppåt):
.group:after ( content: ""; display: table; clear: both; )Tillämpa den på alla överordnade element där du behöver rensa flottörerna. Till exempel:
Du skulle använda detta istället för att rensa flottören med något som overflow: hidden;på föräldern (du vill inte alltid dölja överflöd ).
Nu för lite historia!
Detta var den ursprungliga populära versionen, utformad för att stödja webbläsare så långt tillbaka som möjligt:
.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 var då en lite renare version dokumenterad här av Jeff Starr, baserat på det faktum att ingen använder IE för Mac, vilket är vad backslash-hacket handlade 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 */Då blev det populärt att använda ”grupp” som ett klassnamn, vilket är trevligare och mer semantiskt (via Dan Cederholm). Också contentinte egenskapen inte ens behöver utrymme, kan det vara tom sträng (via Nicolas Gallagher). Sedan, utan text, font-sizeär det inte nödvändigt (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 */Naturligtvis, om du tappar stöd för IE 6 eller 7, ta bort tillhörande rader.
Uppdatering 18 maj 2011: Nicolas Gallagher igen med "micro" clearfix. Se även dessa ytterligare grejer..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Se överst på denna sida för den mest moderna versionen av clearfix.
I framtiden kanske vi kan göra:
.group ( display: flow-root; )