我在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">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>
我知道overflow：hidden等用于处理外部的内容,但不明白在这种情况下如何应用.
解决方法
我试图结束混乱：
ul是一个块级元素,与p元素一样(它们伸展到父宽度的100％).这就是为什么每个默认情况下,如果在这些元素上没有声明宽度或显示,p将显示在ul的下方.
现在在你的例子中,ul只包含浮动元素.这使它崩溃到0px的高度(它仍然具有100％的宽度,尽管你可以在示例中看到).相邻的p将出现在浮动的lis的右侧,因为它们被认为是正常的浮动元素.
现在声明溢出(除可见之外的任何值)建立一个新的block formatting context,这使得ul包含其子节点.突然,ul“再出现”,没有大小0px了. p被推到底部.你也可以声明position：absolute来实现相同的“清除”效果(现在ul从普通元素流中取出的副作用 – ps将被ul重叠)
如果你是在技术上的东西,比较CSS规范的相关段落：
§10.6.3 Block-level non-replaced elements in normal flow when ‘overflow’ computes to ‘visible’
和
(感谢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>
