13

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

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/

我想知道为什么溢出：隐藏会触发这种行为。我希望它会切断内部 li 项目，而不是强制外部 div 扩展到必要的高度。

感谢您的关注！

4

3 回答 3

11

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

在这里，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输入额外的标记。

于 2012-10-19T22:36:27.873 回答
6

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

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

于 2012-10-19T22:38:10.157 回答
0

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

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

于 2012-10-19T22:38:30.937 回答