溢出：隐藏对 ul 标签有什么作用？答案

【问题标题】：What does overflow: hidden do for ul tag?溢出：隐藏对 ul 标签有什么作用？
【发布时间】：2012-10-19 22:31:17
【问题描述】：

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

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 扩展到必要的高度。

感谢您的收看！

【问题讨论】：

非常有趣。实际上，如果您将 overflow: hidden 更改为 overflow: auto 它仍然有效。希望我能解释原因，但这是一个非常有趣的发现。谢谢。
或许这篇文章能有所启发：colinaarts.com/articles/the-magic-of-overflow-hidden
如果你指定高度，它会切断内部的 li 项目。这与其说是overflow:hidden 的行为，不如说是float:left/right 的行为。

标签： html css html-lists overflow hidden

【解决方案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 键入额外的标记。

【讨论】：

【解决方案2】：

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

我将在 StackOverflow 上指出另一个答案，以进一步解释这一点：Adding CSS border changes positioning in HTML5 webpage

【讨论】：

【解决方案3】：

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

没有溢出：隐藏内容及其行为可能会也可能不会影响 UL 的整体维度。这主要是因为 UL 更像是一个容器，其边界受其内容设置/影响。隐藏溢出后，UL 更像是一个具有覆盖尺寸的视口，而不是一个容器。

【讨论】：