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

除非您将溢出设置为隐藏，滚动或自动，否则任何可能浮动的内容都不会被剪裁。该方法的真正神奇之处在于，如果没有给元素设置一个高度，当你将overflow设置为hidden时，它会占用内部元素的高度。

这里的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上指出另一个答案，它解释了这一点：Adding CSS border changes positioning in HTML5 webpage

Answer 3

溢出：隐藏，内容不驱动/推动UL的尺寸。 UL尺寸覆盖并忽略内容是否适合其内部。

没有溢出：隐藏内容及其行为可能会或可能不会推动UL的整体尺寸。这主要是因为UL更像是一个容器，其边界受其内容的影响。在隐藏溢出的情况下，UL更多地充当具有覆盖尺寸的视口，而不是容器。

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

3 个答案: