Ez jól fog szolgálni manapság (IE 8 és újabb):
.group:after ( content: ""; display: table; clear: both; )Alkalmazza minden olyan szülőelemre, amelyben törölnie kell az úszókat. Például:
Ezt használná ahelyett, overflow: hidden;a szülőnél (nem akarja mindig elrejteni a túlcsordulást) ).
Most egy kis történelem!
Ez volt az eredeti népszerű verzió, amelyet a lehető leghamarabb támogattak a böngészők számára:
.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 */Akkor volt egy kicsit tisztább verzió, amelyet Jeff Starr dokumentált itt, azon a tényen alapulva, hogy senki sem használja az IE-t a Mac-hez, erről szólt a hátsó perjel hackje.
.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 */Aztán népszerűvé vált a „csoport” használata osztálynévként, ami szebb és szemantikusabb (Dan Cederholm útján). Továbbá, az contentingatlannak nincs is szüksége a helyre, lehet üres karakterlánc (Nicolas Gallagher útján). Ezután szöveg nélkül nincs font-sizeszükség (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 */Természetesen, ha elveti az IE 6 vagy 7 támogatást, távolítsa el a hozzá tartozó sorokat.
Frissítés 2011. május 18-án: Nicolas Gallagher ismét a „micro” törléssel. Lásd még ezeket a további dolgokat..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Az oldal tetején találhatja meg a clearfix legmodernebb változatát.
A jövőben talán megtehetjük:
.group ( display: flow-root; )