ClearFix vs Overflow [duplikat]

Question

ClearFix vs Overflow [duplikat]

To pytanie ma już odpowiedź tutaj:

Jakie metody 'clearfix' mogę użyć? 28 odpowiedzi

To standardowy problem float. Masz kilka pływających elementów wewnątrz nadrzędnego kontenera div. Ponieważ dzieci są pływające, rodzic nie rozszerza się o wszystkie z nich.

Wiem o rozwiązaniu clearfix, jak również ustawienie właściwość overflow na kontenerze nadrzędnym div do "auto" lub "hidden". http://www.quirksmode.org/css/clearing.html Dla mnie ustawienie metody overflow wydaje się o wiele ładniejsze, ponieważ jest to tylko jedna właściwość. Chcę zrozumieć, kiedy podejście clearfix ma przewagę nad tą metodą, ponieważ widzę, że jest używana bardzo często.

P. S. nie martwię się o IE6.

32

css clearfix

Author: Rajat, 2010-03-03

Source

1 answers

score 15 · Accepted Answer

Jedynym czasem, kiedy powinieneś używać metody "clearfix", która wstawia niewidoczną zawartość do wyczyszczenia, jest to, że element musi być widoczny, gdy przepełnia element, do którego go stosujesz, w przeciwnym razie wyzwalanie hasLayout + overflow jest złote.

Zauważ, że w IE7 przepełnienie ukrytych wyzwalaczy hasLayout. Nie jestem pewien co do IE8.

#wrapper { width:80em; overflow:hidden; }

Powyższa metoda będzie działać dobrze w większości przypadków, chyba że trzeba powiedzieć, # header przepełnić przeszłości #wrapper..

#wrapper { width:80em; position:relative; }
#wrapper:after {  content:"."; clear:both; display:block; height:0; visibility:hidden; }
#header { position:absolute; top:-15px; left:-15px; }