为什么对于样式为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 liCSS声明的语句然后正确显示ul元素的高度.

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

Answer 1

这不是一个错误,它是一个功能!

浮动元件的容器收缩,以便其他内联元件围绕它流动(根据规格).

在这种情况下,3个选项是:

1. 使用已知高度值并将其应用于ul元素.

   ul { height: 150px; }
   

2. 使用元素overflow上的属性ul强制浏览器重新计算其高度及其中的所有元素.

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

3. 将容器本身浮起来.因为如果它自己浮动就没有必要缩小它.

   ul { float: left; }