溢出:隐藏为ul标签做什么？

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%;
}

它运行得非常好,但我对溢出感到难以置信:隐藏的CSS声明.

没有它,我的外部div就像这样崩溃:

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

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

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

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

谢谢你的期待!

Answer 1

除非你将溢出设置为隐藏,滚动或自动,否则任何可能浮动的内部都不会被剪裁.该方法的真正神奇之处在于,在没有给予元素设定高度的情况下,当您将溢出设置为隐藏时,它会占用内部元素的高度.

这里div不会包围img,因为img是浮动的.

<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类型额外标记.

Answer 2

将overflow: hidden;有包含浮动li秒。overflow: hidden;创建一个新的块格式上下文——这就是具有自己的块格式上下文的元素所做的——它们包含浮点数。

我将在 StackOverflow 上指出另一个答案，该答案对此进行了更多解释：添加 CSS 边框更改 HTML5 网页中的定位