CSS3 - 溢出：隐藏修复高度？

Question

我有一个UL，里面有一些项目：

<ul>
    <li><a href="#"><img alt="FaceBook" src="images/facebook.png" /></a></li>
    <li><a href="#"><img alt="Twitter" src="images/twitter.png" /></a></li>
</ul>

它在网页上显示正常，但UL的真实高度为0像素。

仅当我将overflow:hidden参数添加到UL时，高度修正：

我一直认为overflow:hidden只会阻止物品进入收件人之外，但实际上并不会影响收件人的维度。虽然默认高度应该自动高到足以适合所有项目。

问题： 为什么UL默认不具有auto高度，为什么overflow:hidden会影响它？< / p>

Answer 1

默认情况下，<ul>占用的空间与其子元素一样多（请参阅http://jsfiddle.net/）。如果您遇到的情况不同，那么您已经应用了一些CSS来破坏默认行为。

如果你float <li>他们的<ul>标签，他们就不会占用任何空间，这会让你overflow: hidden;＆＃34;消失＆＃34;。它确实占用了与孩子一样多的空间，但现在孩子们不再占用任何空间，因为它们是浮动的。将<ul>设置为{{1}}是对此的修复。