Clearfix: wymuś elementowi oczyszczenie swoich dzieci - CSS-Tricks

To wystarczy w dzisiejszych czasach (IE 8 i nowsze):

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

Zastosuj go do dowolnego elementu nadrzędnego, w którym musisz wyczyścić elementy pływające. Na przykład:

Używałbyś tego zamiast czyścić pływak czymś takim jak
na dole rodzica (łatwe do zapomnienia, nieobsługiwane bezpośrednio w CSS, niesemantyczne) lub używając czegoś takiego jak overflow: hidden;na rodzicu (nie zawsze chcesz ukryć przepełnienie ).

Teraz trochę historii!

To była oryginalna popularna wersja, zaprojektowana do obsługi przeglądarek od tak dawna, jak to tylko możliwe:

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

Jeff Starr udokumentował wtedy nieco bardziej przejrzystą wersję, opartą na fakcie, że nikt nie używa IE dla Maca, o co chodziło w hackowaniu z odwrotnym ukośnikiem.

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

Następnie popularne stało się używanie „grupy” jako nazwy klasy, która jest ładniejsza i bardziej semantyczna (poprzez Dan Cederholm). Ponadto contentwłaściwość nie potrzebuje nawet spacji, może to być pusty ciąg (za pośrednictwem Nicolasa Gallaghera). Wtedy bez żadnego tekstu font-sizejest niepotrzebne (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 */

Oczywiście, jeśli zrezygnujesz z obsługi IE 6 lub 7, usuń powiązane linie.

Aktualizacja 18 maja 2011 r .: Nicolas Gallagher ponownie z poprawką „mikro”. Zobacz także te dodatkowe rzeczy.

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

Zobacz górę tej strony, aby zapoznać się z najnowszą wersją Clearfix.

W przyszłości być może uda nam się:

.group ( display: flow-root; )