Elementy pływające z dzieckiem: przepełnienie: ukryte lub jasne: zarówno?

Question

Jako programista stron internetowych często będę mieć dwóch pływających (potomnych) elementów div w innym (rodzimym) div. Właściwie robię to przez cały dzień.

<style type="text/css"> 
    #left {float:left;} 
    #right {float:right;} 
</style> 
<div id="parent"> 
    <div id="left" class="child">&nbsp;</div> 
    <div id="right" class="child">&nbsp;</div> 
</div> 

To nie działa bez dodatkowej odrobiny css/html, ponieważ rodzic nie rozwija się automatycznie, aby dopasować pływające dzieci. Są dwa popularne sposoby na pokonanie tego:
1) Dodaj overflow:hidden do css rodzica.
2) Dodaj trzecie "oczyszczające" dziecko <br style="clear:both;" />.

wiem, że jest kilka innych podobnych pytań o takich rzeczach, ale moje pytanie brzmi:

Która metoda jest lepsza i dlaczego? Co są plusy i minusy każdego?

Answer 1

1. Ukryty przelew - dość solidna metoda. Główną wadą jest to, że jeśli ustawisz wysokość elementu nadrzędnego, wszelkie przepełnienie będzie ... dobrze, ukryte. Znalazłem to podczas tworzenia menu z pływającymi elementami listy - podmenu nie byłyby wyświetlane.

2. Element czyszczący - zamiast podziału wiersza, użyłbym elementu div z height: 0; clear: both;, ponieważ nie spowoduje to powstania luki poniżej. Jest to bardziej solidna metoda, a jedyną wadą jest dodatkowy element w znacznikach.

3. Opuść rodzica - z mojego doświadczenia wynika, że ​​istnieje zbyt wiele sytuacji, w których nie chcesz unosić elementu nadrzędnego, więc uniknęłbym go.

4. Można również użyć wygenerowanego metodę treści:

   #parent:after { 
       content: "."; 
       visibility: hidden; 
       clear: both; 
   } 
   

   To oszczędza konieczność dodatkowego elementu w znacznikach, ale to nie działa w IE7 i poniżej.

5. Użyj bloków wbudowanych - właśnie zapamiętałeś tę metodę. Zamiast pływających dwie kolumny, ustawić je display: inline-block i pojawią się one side-by-side:

   .child { 
       display: inline-block; 
       vertical-align: top; 
   } 
   

   Jedyne co musisz pamiętać z tej metody, jeżeli istnieje jakikolwiek odstępy pomiędzy zamknięciem tagu jednego bloku i tag otwierający drugiego, między kolumnami pojawi się spacja (której rozmiar zależy od czcionki, więc trudno ją zmierzyć). Tak długo jak robisz ...</div><div id=..., ta metoda działa dobrze i jest lepsza od pływających elementów IMO.

Answer 2

Drugi jest zupełnie niepotrzebny i dodaje dodatkowy znacznik. Po prostu coś innego, co mogłoby pójść nie tak. Użyj pierwszego, jeśli pasuje do rachunku. Możesz także unieść element nadrzędny, aby zrobić to samo, chociaż może nie pasować do tego, co robisz.

Answer 3

PPK omawia to w Clearing floats w trybie QuirksMode.