html - 溢出: hidden do for ul tag?是什么意思

Question

我正在使用本文中的说明创建一个多列列表:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

简而言之，它说要做一些事情:

HTML:

<div class='block'>
  <ul>
    <li>
      Item1
    </li>
    <li>
      Item2
    </li>
    <li>
      Item3
    </li>
  </ul>
</div>

CSS:

.block {
    border: 1px solid black;
    padding: 10px;
}
.block ul {
    width: 100%;
    overflow: hidden;
}
.block ul li {
    display: inline;
    float: left;
    width: 50%;
}

它的效果非常好，但我对 overflow:hidden CSS 声明感到困惑。

没有它，我的外部 div 会像这样崩溃:

http://jsfiddle.net/alininja/KQ9Nm/1/

包含在内时，外部 div 的行为与我希望的完全一样:

http://jsfiddle.net/alininja/KQ9Nm/2/

我想知道为什么 overflow: hidden 会触发这种行为。我希望它切断内部 li 元素，而不是强制外部 div 扩展到必要的高度。

感谢您的关注!

Answer 1

除非您将溢出设置为隐藏、滚动或自动，否则内部可能 float 的任何内容都不会被剪裁。该方法的真正魔力在于，无需为元素设置高度，当您将 overflow 设置为 hidden 时，它会采用内部元素的高度。

这里 div 不会环绕 img，因为 img 是 float 的。

<div><img style="float:left;height:100px" /></div>

这里 div 将实现 img 的高度，因为它有适当的溢出。

<div style="overflow:hidden"><img style="float:left;height:100px" /></div>

如果你给它一个设定的高度，然后将溢出设置为隐藏，它会切掉任何本来会向外溢出的东西。

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>

请注意，在很多情况下，这些技术可用于避免 clear:both 键入额外的标记。