為什么對於樣式為float的li：left瀏覽器將ul元素的高度計算為0？

Question

在gist上提供的代碼中： https ： //gist.github.com/1341600我試圖使用ul / li元素將一些搜索表單元素（而不是表格）組合在一起。 在瀏覽器中檢查輸出時（帶有firebug的Chrome 15 / FF 7），ul元素似乎高度為0，li元素顯示在它之外。 當我評論出來的時候

float: left; 來自ul.search-inputs li CSS聲明的語句然后正確顯示ul元素的高度。

任何人都可以指出我的解決方案，以正確看到ul元素的高度？

Answer 1

這不是一個錯誤，它是一個功能！

浮動元件的容器收縮，以便其他內聯元件圍繞它流動（根據規格）。

在這種情況下，3個選項是：

1. 使用已知高度值並將其應用於ul元素。

    ul { height: 150px; } 

2. 使用ul元素上的overflow屬性強制瀏覽器重新計算其高度以及其中的所有元素。

    ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */ 

3. 將容器本身浮起來。 因為如果它自己漂浮就沒有必要縮小它。

    ul { float: left; } 

Answer 2

添加以下css：

ul.search-inputs {
    overflow: hidden;
}

另見這個jsfiddle 。

Answer 3

此行為符合W3C規范。 這是故意的，但第一次可能有點令人困惑。 必須縮小浮動內容的容器，以允許另一個內聯內容圍繞它自己的內容流動。

例如，如果你有

<p>
    <img class="float" height="1000">
     sometext
</p> 
<p>
     sometext
</p> 

你可能會期望第二個p流圖像中的一些文本。

如果你需要一個寬度和高度的容器，你可以手動指定它們，或者應用css overflow：auto或float：left to container;