Question

在要点上提供的代码中：https://gist.github.com/1341600 我正在尝试使用ul / li元素将一些搜索表单元素（而不是表格）组合在一起。在浏览器中检查输出时（带有firebug的Chrome 15 / FF 7），ul元素似乎高度为0，li元素显示在它之外。当我评论

时来自float: left; CSS声明的

ul.search-inputs li语句，然后正确显示ul元素的高度。

为了正确看到ul元素的高度，有人能指出我的解决方案吗？

Answer 1

这不是一个错误，这是一个功能！

浮动元素的容器收缩，以便其他内联元素围绕它流动（根据规格）。

在这种情况下，3个选项是：

使用已知高度值并将其应用于ul元素。
```
ul { height: 150px; }
```
使用overflow元素上的ul属性强制浏览器重新计算其高度及其中的所有元素。
```
ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
```
浮动容器本身。因为如果它自己漂浮就没有必要缩小它。
```
ul { float: left; }
```

Answer 2

添加以下css：

ul.search-inputs {
    overflow: hidden;
}

另见jsfiddle。

Answer 3

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

E.g。如果你有

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

您可能会期望来自第二个p流图像的一些文本。

如果你需要一个宽度和高度的容器，你可以手动指定它们，或者应用css overflow：auto或float：left to container;