Html CSS 溢出：用浮点数隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16041229/
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
CSS overflow:hidden with floats
提问by Robert Rocha
I read the following code on w3schoolsand do not understand how the overflowproperty would impact whether text appears to the right of the ulor not.
我在 w3schools 上阅读了以下代码，但不明白该overflow属性将如何影响文本是否出现在右侧ul。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
padding: 8px;
}<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>I know that overflow:hiddenis used to handle content that goes outside of the box but don't understand how it applies in this instance.
我知道它overflow:hidden用于处理超出框外的内容，但不明白它在这种情况下如何应用。
回答by Christoph
I try to end the confusion:
我试图结束混乱：
ulis a block-level element as is the pelement (they stretch to 100% of the parent width). That is why per default the pwill appear below the ulif no width or display is declared on those elements.
ul和元素一样是块级元素p（它们拉伸到父宽度的 100%）。这就是为什么默认情况下如果没有在这些元素上声明宽度或显示，p则将出现在下面ul。
Now in your example the ulcontains only floated elements. This makes it collapse to a height of 0px(It still has 100% width though as you can see in the example). The adjacent pwill appear to the right of the floated lis because they are considered as normal floated elements.
现在在你的例子ul中只包含浮动元素。这使得它折叠到一个高度0px（它仍然具有 100% 的宽度，但正如您在示例中看到的那样）。相邻元素p将出现在li浮动元素的右侧，因为它们被视为正常的浮动元素。
Now declaring overflow(any value other than visible) establishes a new block formatting context, which makes the ulcontains its children. Suddenly the ul"reappears", not having size 0pxanymore. The pis getting pushed to the bottom. You could also declare position:absoluteto achieve the same "clearing" effect (with the side effect that now the ulis taken out of the normal element flow - the ps will be overlapped by the ul.)
现在声明overflow（除 之外的任何值visible）建立一个新的块格式化上下文，这使得ulcontains 其子项。突然ul“重新出现”，不再有大小0px。该p是越来越被推到了底部。您还可以声明position:absolute实现相同的“清除”效果（副作用是现在ul从正常元素流中取出 - ps 将与ul.重叠）
If you are into the technical stuff, compare the according paragraphs of the CSS spec:
如果您对技术感兴趣，请比较 CSS 规范的相应段落：
§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
and
§10.6.7 'Auto' heights for block formatting context roots. (Thanks to BoltClock for digging out the links).
§10.6.3 当“溢出”计算为“可见”时正常流中的块级非替换元素
和
块格式化上下文根的 §10.6.7“自动”高度。（感谢 BoltClock 挖掘链接）。
ul{
list-style-type:none;
margin:0; padding:0;
background-color:#dddddd;
border:2px solid red;
}
li{
float:left;
}
a{
display:block;
width:60px;
background-color:#555;
color:white;
}
p{
margin:0;
outline:2px dotted blue;
}
#two{
clear:both;
overflow:hidden;
}No overflow:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p>
<br>
With overflow: hidden
<ul id="two">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>回答by ryanbrill
Setting overflow: hiddenon an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hiddenapplied are cleared.
overflow: hidden在元素上设置会导致创建新的浮动上下文，因此在已overflow: hidden应用的元素内浮动的元素将被清除。
回答by Plummer
This is why w3schools is not a reliable source for web designer/developers. You are correct, it is a terrible example.
这就是为什么 w3schools 不是网页设计师/开发人员的可靠来源。你是对的，这是一个可怕的例子。
It doesn't because, in this example, the parent element does not have a fixed with. Furthermore, it's an un-ordered list tag, which is going to stretch to the size of it's children regardless.
这不是因为，在这个例子中，父元素没有固定的。此外，它是一个无序列表标签，无论如何它都会扩展到它的孩子的大小。
CSS
CSS
.parent {
width: 150px;
height: 100px;
padding: 10px;
background: yellow;
overflow: hidden;
}
.child {
float: left;
width: 75px;
height: 120px;
margin: 10px;
background: blue;
}
.baby {
width: 200px;
height: 25px;
background: green;
}
Markup
标记
<div class="parent">
<div class="child">
<div class="baby">
</div>
</div>
<div class="child">
</div>
</div>
回答by Qiulang
To quote from HTML & CSS Is Hard
To summarize, when you have an extra unfloated HTML element at the bottom of a container div, use the clear solution. Otherwise, add an overflow: hidden declaration to the container element. The underlying idea for both options is that you need a way to tell the browser to incorporate floats into the height of their container element
总而言之，当容器 div 底部有一个额外的未浮动 HTML 元素时，请使用 clear 解决方案。否则，向容器元素添加一个 overflow: hidden 声明。这两个选项的基本思想是您需要一种方法来告诉浏览器将浮动合并到其容器元素的高度中
回答by Tyler
Instead of the overflow:hidden;use clear:both;for the <p>. here it is in use http://jsfiddle.net/Mvv8w/. Basically overflow:hiddenwill clear anything that is aside it just as clear:both;does.
取而代之的是overflow:hidden;使用clear:both;了<p>。这里正在使用http://jsfiddle.net/Mvv8w/。基本上overflow:hidden会清除任何放在一边的东西clear:both;。
