Clearfix: Prisili element, da sam očisti svoje otroke - CSS-triki

Anonim

To vas bo dandanes dobro (IE 8 in novejše):

.group:after ( content: ""; display: table; clear: both; )

Uporabite ga za kateri koli nadrejeni element, v katerem morate počistiti lebdeče. Na primer:

To bi uporabili, namesto da bi float počistili z nečim, kot je
na dnu nadrejenega (enostavno pozabiti, v CSS ni mogoče obvladati, nesemantično) ali uporabiti nekaj takega kot overflow: hidden;na nadrejenem (prelivanja ne želite vedno skriti ).

Zdaj pa malo zgodovine!

To je bila prvotna priljubljena različica, namenjena podpiranju brskalnikov, kolikor je le mogoče:

.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 */

Potem je bila tu nekoliko bolj čista različica, ki jo je tukaj dokumentiral Jeff Starr, in sicer na podlagi dejstva, da IE za Mac nihče ne uporablja, kar je bilo v bistvu kramp s povratno poševnico.

.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 */

Potem je postalo priljubljeno uporabljati »group« kot ime razreda, kar je lepše in bolj pomensko (prek Dan Cederholm). Prav tako contentlastnost ne potrebuje prostora, lahko je prazen niz (prek Nicolasa Gallagherja). Nato brez kakršnega koli besedila font-sizeni treba (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 */

Če opustite podporo za IE 6 ali 7, seveda odstranite pripadajoče vrstice.

Posodobitev 18. maja 2011: Nicolas Gallagher znova z mikro popravkom. Oglejte si tudi te dodatne stvari. 
.group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )

Glejte vrh te strani, kjer najdete najsodobnejšo različico jasne popravke.

V prihodnosti bomo morda lahko storili:

.group ( display: flow-root; )