CSS overflow：隐藏与浮动 [英] CSS overflow:hidden with floats
问题描述
我在w3schools上阅读了下面的代码，不明白overflow属性会如何影响文本是否出现在ul的右边。
<！DOCTYPE html>
< html>
< head>
< style>
ul {
list-style-type：none;
margin：0;
padding：0;
overflow：hidden;
}
li {
float：left;
}
a {
display：block;
width：60px;
background-color：#dddddd;
}
< / style>
< / head>
< body>
< ul>
< li>< a href =＃home>首页< / a>< / li&
< li>< a href =＃news>新闻< / a>< / li>
< li>< a href =＃contact>联系人< / a>< / li>
< li>< a href =＃about>关于< / a>< / li&
< / ul>
< p>< b>注：< / b>如果未指定！DOCTYPE，则浮动项目可能会产生意外的结果。< / p>
< p>背景颜色被添加到链接以显示链接区域。整个链接区域是可点击的，而不仅仅是文字。< / p>
< p>< b>注：< / b> overflow：hidden被添加到ul元素，以防止li元素移出列表。< / p>
< / body>
< / html>
我知道 overflow：hidden 等。
我用来处理在盒子外面的内容，但不知道它是如何应用的。尝试结束混淆：
ul 是块级别的元素， p 元素（它们伸展到父宽度的100％）。这就是为什么如果在这些元素上没有声明宽度或显示， p 会出现在 ul / p>
现在在你的示例中， ul 只包含浮动元素。这使它崩溃到一个高度 0px （它仍然有100％的宽度，虽然你可以看到在示例中）。相邻的 p 将出现在浮动的 li 的右侧，因为它们被视为常规浮动元素。 p>
现在声明 overflow （除 visible 之外的任何值）新的块格式化上下文，它使 ul 包含其子项。突然， ul 重新出现，不再具有大小 0px 。 p 正被推到底部。您还可以声明 position：absolute 以实现相同的清除效果（带有现在 ul 是从正常元素流中取出的 - p s将被 ul 重叠。）
如果你是技术人员，请比较CSS规范的相应段落：
§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;} 没有溢出：< ul> < li>< a href =＃home>首页< / a>< / li>< li>< a href =＃news>新闻< / a>< / li> < li>< a href =＃about>关于< / a>< / li> < / ul>< p>请注意，折叠的ul - 没有背景颜色可见的折叠边框，此段落将lis视为常规浮动< / p& >< li>< a href =＃home>首页< / a>< / li>< li>< a href =＃news>新闻< / a& / li>< li>< a href =＃about>关于< / a>< / li>< / ul>< p> ul已重新出现 - 现在包含子项li - 已清除浮动< / p>
I read the following code on w3schools and do not understand how the overflow property would impact whether text appears to the right of the "ul" or not.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<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> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>
I know that the overflow:hidden etc. is used to handle content that goes outside of the box but don't understand how it applies in this instance.
解决方案 I try to end the confusion:
ul is a block-level element as is the p element (they stretch to 100% of the parent width). That is why per default the p will appear below the ul if no width or display is declared on those elements.
Now in your example the ul contains 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 p will appear to the right of the floated lis because they are considered as normal floated elements.
Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the ul contains its children. Suddenly the ul "reappears", not having size 0px anymore. The p is getting pushed to the bottom. You could also declare position:absolute to achieve the same "clearing" effect (with the side effect that now the ul is taken out of the normal element flow - the ps will be overlapped by the ul.)
If you are into the technical stuff, compare the according paragraphs of the CSS spec:
§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).
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>
这篇关于CSS overflow：隐藏与浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
