Html 溢出：隐藏对 ul 标签有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12983336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does overflow: hidden do for ul tag?
提问by Zhao Li
I'm creating a multiple column list using the directions from this article:
我正在使用本文中的说明创建一个多列列表：
http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
In a nutshell, it says to do something along the lines of this:
简而言之，它说按照以下方式做一些事情：
HTML:
HTML：
<div class='block'>
<ul>
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</div>
CSS:
CSS：
.block {
border: 1px solid black;
padding: 10px;
}
.block ul {
width: 100%;
overflow: hidden;
}
.block ul li {
display: inline;
float: left;
width: 50%;
}
And it works wonderfully, but I was mind-boggled at the overflow:hidden CSS declaration.
它工作得很好，但我对overflow:hidden CSS 声明感到难以置信。
Without it, my outer div collapses like so:
没有它，我的外部 div 会像这样崩溃：
http://jsfiddle.net/alininja/KQ9Nm/1/
http://jsfiddle.net/alininja/KQ9Nm/1/
When it's included, the outer div behaves exactly as how I would want it to be:
当它被包含时，外部 div 的行为与我希望的完全一样：
http://jsfiddle.net/alininja/KQ9Nm/2/
http://jsfiddle.net/alininja/KQ9Nm/2/
I'm wondering why overflow: hidden is triggering this behaviour. I would expect it to cutoff the inner li items instead of forcing the outer div to expand to the necessary height.
我想知道为什么 overflow: hidden 会触发这种行为。我希望它切断内部 li 项目，而不是强制外部 div 扩展到必要的高度。
Thank you for looking!
感谢您的关注！
采纳答案by TheZ
Anything inside that might be floating does not get clipped unless you have the overflow set to either hidden, scroll or auto. The real magic of the method is that without having given the element a set height, when you set overflow to hidden it takes on the height of the inner elements.
除非您将溢出设置为隐藏、滚动或自动，否则内部可能浮动的任何内容都不会被剪裁。该方法的真正魅力在于，在没有给元素设置高度的情况下，当您将溢出设置为隐藏时，它会采用内部元素的高度。
Here the div would not wrap around the img because the img is floating.
这里 div 不会环绕 img，因为 img 是浮动的。
<div><img style="float:left;height:100px" /></div>
Here the div will actualize the height of the img now that is has a proper overflow.
这里 div 将实现 img 的高度，现在它有一个适当的溢出。
<div style="overflow:hidden"><img style="float:left;height:100px" /></div>
If you were to give it a set height and then set overflow hidden it would chop anything that would otherwise have overflowed outwards.
如果你给它一个设置的高度然后设置溢出隐藏它会砍掉任何本来会向外溢出的东西。
<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>
Note that in a lot of cases these techniques can be used to avoid clear:bothtype extra markup.
请注意，在很多情况下，这些技术可用于避免clear:both输入额外的标记。
回答by banzomaikaka
The overflow: hidden;is there to contain the floated lis. overflow: hidden;creates a new block formatting context - and that's what elements with their own block formatting contexts do - they contain floats.
将overflow: hidden;有包含浮动li秒。overflow: hidden;创建一个新的块格式上下文——这就是具有自己的块格式上下文的元素所做的——它们包含浮点数。
I'll point to another answer here on StackOverflow that explains this a little bit more: Adding CSS border changes positioning in HTML5 webpage
我将在 StackOverflow 上指出另一个答案，该答案对此进行了更多解释：添加 CSS 边框更改 HTML5 网页中的定位
回答by Bryan Allo
With overflow:hidden, the contents do not drive/push the dimensions of the UL. The UL dimensions override and ignore whether or not the contents fit inside it.
使用溢出：隐藏，内容不会驱动/推动 UL 的尺寸。UL 尺寸会覆盖并忽略内容是否适合其中。
Without overflow:hidden the content and their behavior may or may not drive the overall dimensions of the UL. This is mainly because the UL is is more of a container who's boundaries are set/influenced by its contents. With overflow hidden, the UL acts more as a view-port with overriding dimensions, not so much a container.
无溢出：隐藏内容及其行为可能会或可能不会驱动 UL 的整体维度。这主要是因为 UL 更像是一个容器，其边界受其内容设置/影响。隐藏溢出后，UL 更像是一个具有覆盖维度的视口，而不是一个容器。
