浮動子元素：溢出：隱藏或清除：兩者？

Question

作爲一名Web開發人員，我經常會在另一個（父母）div中有兩個浮動（子）div。其實我整天都這樣做。

<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> 

如果沒有多餘的css/html，這不起作用，因爲父級不會自動增長以適應浮動子級。有兩種方法可以克服：
1）將overflow:hidden添加到父項的CSS中。
2）添加第3個「結算」子女<br style="clear:both;" />。

我知道有這樣的事情其他一些類似的問題，但我的問題是：

哪種方法更好，爲什麼？什麼 是每個人的利弊？

Answer 1

1. 隱藏溢出 - 非常可靠的方法。主要的缺點是，如果你在父元素上設置高度，任何溢出將會......好，隱藏。我在創建浮動列表項目的菜單時發現這一點 - 子菜單不會出現。

2. 清除元素 - 而不是換行符，我會使用與height: 0; clear: both;的div，因爲它不會在下面產生差距。這是一個更堅實的方法，唯一的缺點是標記中有一個額外的元素。

3. 浮動父 - 在我的經驗中有太多的情況，你不想浮動父元素，所以我會避免它。

4. 您還可以使用所產生的內容方法：

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

   這樣可以節省在標記一個額外的元素的需要，但它不會在IE7和下面的工作。

5. 使用內嵌塊 - 只記得這種方法。相反，浮動的兩列，將其設置爲display: inline-block，他們將出現並排側：

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

   你必須用這種方法請記住唯一的事情是，如果有一個塊的結束標記之間的任何空白另一個的開始標籤，一個空格將出現在列之間（其大小取決於字體，因此很難衡量）。只要你做...</div><div id=...那麼這種方法工作正常，並優於浮動元素國際海事組織。

Answer 2

第二個是完全不必要的，並增加了額外的標記。只是別的錯誤。如果它適合帳單，請使用第一個。你也可以浮動父元素來做同樣的事情，儘管它可能不適合你正在做的事情。

Answer 3

PPK在Clearing floats上對QuirksMode進行了討論。