混淆關於CSS的float

Question

我有一個div和圖像裏面

<div> 
    <img src="logo.png"> 
</div> 

img { 
    float: left; 
} 

我可以看到div已經崩潰，高度已成爲0， 我的第一個問題是，但圖像是內部的，因爲div的高度是0，爲什麼圖像仍然可以看到？

我知道解決方案喜歡給一個overflow財產，甚至auto。但爲什麼它可以解決問題？

Answer 1

默認情況下，父元素不會環繞浮動內容。 （如果它確實如此，這在很多情況下會很麻煩。）因此，如果您希望這樣做，您需要強制容器包含浮動元素。 overflow: hidden;是這樣做的一種方式，但它並不總是一個可行的解決方案。還有其他一些方法，比如「clearfix」方法。

overflow屬性用於包含浮動，因爲遵守規則，包含元素必須「看看」裏面的內容。通常情況下，浮動內容是在文檔流之外進行的，並且大部分被其他元素忽略。

下面是該div其它一些遏制選項：

的 「clearfix」 的方法：

div:after { 
    content:""; 
    display:table; 
    clear:both; 
} 

浮動容器：

div.contain { 
    float: left; 
    width: 100%; 
} 

使用display: table：

div { 
    display: table; 
    width: 100%; 
} 

使用display: inline-block：

div { 
    display: inline-block; 
    width: 100%; 
} 

使用position: absolute;：

div { 
    position: absolute; 
    width: 100%; 
} 

有些人比其他人更有用，和背景將決定是，不以任何特定佈局爲宜。通常，我堅持使用overflow: hidden，除非某些內容需要掛出包含的元素（例如在下拉菜單中），在這種情況下，我通常會使用「clearfix」選項。

Answer 2

浮動元素不會影響父元素的大小。由於div只包含浮動元素，因此沒有任何東西給它高度。

通過在父元素上設置overflow樣式（除visible之外的任何其他樣式），您強制它包含其元素，以便它們可以滾動。

通過不在父元素上設置特定大小，它將從其子元素中獲取大小，並且不會獲得滾動條。由於孩子現在被包含，浮動元素將影響父母的大小。

在父元素上使用overflow的另一種方法是將非浮動子項添加到另一個子元素上，並使用clear: both;以使其位於浮動子元素下方。這樣父母將會因爲最後一個不流動的孩子而包含孩子。