Asta vă va face bine în aceste zile (IE 8 și în sus):
.group:after ( content: ""; display: table; clear: both; )Aplicați-l la orice element părinte în care trebuie să ștergeți plutitoarele. De exemplu:
Ați folosi acest lucru în loc să goliți plutitorul cu ceva de genul overflow: hidden;părintelui (nu doriți întotdeauna să ascundeți revărsarea ).
Acum, pentru un pic de istorie!
Aceasta a fost versiunea populară originală, concepută pentru a sprijini browserele cât mai curând posibil:
.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 */Apoi a existat o versiune mai curată documentată aici de Jeff Starr, bazată pe faptul că nimeni nu folosește IE pentru Mac, ceea ce a însemnat hack-ul backslash.
.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 */Apoi a devenit populară utilizarea „grupului” ca nume de clasă, care este mai drăguț și mai semantic (prin Dan Cederholm). De asemenea, contentproprietatea nici măcar nu are nevoie de spațiu, poate fi un șir gol (prin Nicolas Gallagher). Apoi, fără niciun text, nu font-sizeeste necesar (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 */Desigur, dacă renunțați la suportul IE 6 sau 7, eliminați liniile asociate.
Actualizare 18 mai 2011: Nicolas Gallagher din nou cu „micro” clearfix. Consultați și aceste lucruri suplimentare..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Vedeți partea de sus a acestei pagini pentru cea mai modernă versiune a clearfix-ului.
În viitor, am putea face:
.group ( display: flow-root; )