为什么对于样式float:left的li元素，浏览器会将ul元素的高度计算为0？

Question

在此代码片段中：https://gist.github.com/1341600，我正在尝试使用ul/li元素来分组一些搜索表单元素（而不是表格）。在浏览器（Chrome 15/FF 7 with firebug）中检查输出时，ul元素似乎具有高度为0，而li元素则显示在其外部。当我从ul.search-inputs li CSS声明中注释掉float: left;语句时，ul元素的高度将被正确显示。请问是否有人能指点我一个解决方案，以便正确地查看ul元素的高度？

- marius_neo

Answer 1

这不是一个错误，而是一种特性！

浮动元素的容器被收缩，以便其他行内元素围绕它流动（符合规范）。

在这种情况下有三个选项：

1. Use a known height value and apply it to the ul element.

   ul { height: 150px; }
   

2. Use the overflow property on the ul element to force the browser to recalculate its height along with all the elements inside of it.

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

3. Float the container itself. As there is no need to shrink it if it floats by itself.

   ul { float: left; }
   

- Madara's Ghost

---

为什么这是一个特性而不是一个错误？为什么父元素应该被缩小？ - user590849

@user590849：这是因为浮动元素被“从文档流中取出”，这意味着仅包含浮动元素的容器在文档流中没有任何元素，因此高度为0。 - Madara's Ghost

Answer 2

请添加以下CSS样式：

ul.search-inputs {
    overflow: hidden;
}

还可以查看这个jsfiddle。

- scessor

---

它正在工作。感谢您的答案。您能否解释一下为什么UL浏览器需要这个样式设置？ - marius_neo

你需要停止浮动。你可以通过添加一个带有CSS clear: both的最后元素来停止它，或者在父元素上使用 overflow: hidden（因为 Web 开发人员希望拥有最少的 DOM 元素）。 - scessor

Answer 3

这种行为符合W3C规范。这是故意的，但第一次可能会有点令人困惑。浮动内容的容器必须缩小，以允许另一个内联内容围绕其自己的内容流动。

例如，如果您有一个

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

你可能期望从第二个p流中获取一些文本。

如果你需要一个带有宽度和高度的容器，你可以手动指定它们，或者将css overflow:auto或float:left应用到容器中；

- Dmitry Koroliov