Clearfix: Pakota elementti tyhjentämään lapset itse - CSS-temppuja

Tämä tekee sinusta hienoa näinä päivinä (IE 8 ja uudemmat):

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

Käytä sitä mihin tahansa pääelementtiin, jossa sinun on tyhjennettävä kellukkeet. Esimerkiksi:

Käytä tätä sen sijaan, että tyhjennät kellukkeen jollain
vanhemman alaosassa olevalla tavalla (helppo unohtaa, ei käsiteltävissä suoraan CSS: ssä, ei-semanttinen) tai käyttää jotain overflow: hidden;vanhemman kaltaista (et halua aina piilottaa ylivuotoa ).

Nyt vähän historiaa!

Tämä oli alkuperäinen suosittu versio, joka oli suunniteltu tukemaan selaimia niin pitkälle kuin mahdollista:

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

Siellä oli vähän puhtaampaa versiota, jonka Jeff Starr dokumentoi täällä, perustuen siihen, että kukaan ei käytä IE for Mac -ohjelmaa, mistä taaksepäin hakkerointi oli kyse.

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

Sitten tuli suosittua käyttämään ”ryhmää” luokan nimenä, mikä on mukavampaa ja semanttisempaa (Dan Cederholmin kautta). Myös contentominaisuus ei edes tarvitse tilaa, se voi olla tyhjä merkkijono (via Nicolas Gallagher). Sitten, ilman tekstiä, font-sizeei tarvita (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 */

Tietenkin, jos pudotat IE 6- tai 7-tuen, poista siihen liittyvät rivit.

Päivitys 18. toukokuuta 2011: Nicolas Gallagher uudestaan ​​“micro” clearfix -korjauksella. Katso myös nämä lisäasiat.

.group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )

Tämän sivun yläosasta löydät selvityksen korjauksen uusimman version.

Tulevaisuudessa voimme ehkä tehdä:

.group ( display: flow-root; )