Ovo će vam dobro doći ovih dana (IE 8 i novije):
.group:after ( content: ""; display: table; clear: both; )Primijenite ga na bilo koji nadređeni element u kojem trebate očistiti plovke. Na primjer:
Koristili biste ovo umjesto da čistite float s nečim poput overflow: hidden;roditelja (ne želite uvijek sakriti preljev ).
Sada malo povijesti!
Ovo je bila izvorna popularna verzija, dizajnirana da podržava preglednike što je više moguć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 */Tada je postojala malo čišća verzija koju je ovdje dokumentirao Jeff Starr, a temelji se na činjenici da IE za Mac nitko ne koristi, što je i bio slučaj s hackom s kosim crtama.
.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 */Tada je postalo popularno koristiti "grupu" kao naziv klase, što je ljepše i semantičnije (putem Dana Cederholma). Također, contentsvojstvu ne treba ni prostor, može biti prazan niz (putem Nicolasa Gallaghera). Tada je bez ikakvog teksta font-sizenepotreban (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 */Naravno, ako odustanete od podrške za IE 6 ili 7, uklonite pridružene linije.
Ažuriranje 18. svibnja 2011.: Nicolas Gallagher ponovno s "mikro" jasnim ispravkom. Pogledajte i ove dodatne stvari..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Pogledajte vrh ove stranice za najmoderniju verziju clearfix-a.
U budućnosti ćemo možda moći:
.group ( display: flow-root; )