Sellega saate tänapäeval hästi hakkama (IE 8 ja uuemad):
.group:after ( content: ""; display: table; clear: both; )Rakendage see igale vanemelemendile, milles peate ujukid kustutama. Näiteks:
Kasutaksite seda selle asemel, et ujuk tühjendada millegagi, mis on näiteks overflow: hidden;, mis on vanemal (te ei soovi alati ülevoolu peita ).
Nüüd aga natuke ajalugu!
See oli algne populaarne versioon, mis oli loodud brauserite toetamiseks nii kaugel kui võimalik:
.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 */Siis oli siin natuke puhtam versioon, mille siin on dokumenteerinud Jeff Starr, tuginedes asjaolule, et keegi ei kasuta Maci jaoks IE-d, mis oli tagasilöögi häkkimine.
.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 */Siis sai populaarseks kasutada klassi nimena “group”, mis on toredam ja semantilisem (Dan Cederholmi vahendusel). Samuti contentei vaja vara isegi ruumi, see võib olla tühi string (Nicolas Gallagheri kaudu). Siis on ilma igasuguse tekstita font-sizevaja (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 */Muidugi, kui loobute IE 6 või 7 toest, eemaldage seotud read.
Värskendus 18. mail 2011: Nicolas Gallagher taas „mikro” parandusega. Vaadake ka seda täiendavat kraami..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Selge paranduse kõige moodsama versiooni leiate selle lehe ülaosast.
Tulevikus võime ehk teha järgmist:
.group ( display: flow-root; )