我阅读了following code on 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>
我知道overflow:hidden
用于处理开箱即用的内容,但不了解它在这种情况下的应用方式。
答案 0 :(得分:32)
我试图结束混乱:
ul
与p
元素一样是块级元素(它们延伸到父宽度的100%)。这就是为什么默认情况下,如果在这些元素上没有声明宽度或显示,p
将显示在ul
下方。
现在,在您的示例中,ul
仅包含浮动元素。这使它折叠到0px
的高度(尽管如您在示例中所示,它仍具有100%的宽度)。相邻的p
将出现在浮动的li
的右侧,因为它们被视为正常的浮动元素。
现在声明overflow
(visible
以外的任何值)会建立新的block formatting context,这会使ul
包含其子项。突然,ul
“重新出现”,不再有0px
大小。 p
被推到了最底层。您还可以声明position:absolute
以实现相同的“清除”效果(现在ul
从正常元素流中取出的副作用 - p
将重叠ul
。)
<强> See the example fiddle 强>
如果你是技术人员,请比较CSS规范的相应段落:
§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
和
§10.6.7 'Auto' heights for block formatting context roots。 (感谢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>
答案 1 :(得分:10)
在元素上设置overflow: hidden
会导致创建新的float上下文,因此将清除在已应用overflow: hidden
的元素内浮动的元素。
答案 2 :(得分:0)
这就是为什么w3schools不是网页设计师/开发人员的可靠来源。你是对的,这是一个可怕的例子。
它不是因为,在这个例子中,父元素没有固定的。此外,它是一个无序的列表标签,无论如何都要扩展到它的孩子的大小。
<强> 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;
}
<强>标记强>
<div class="parent">
<div class="child">
<div class="baby">
</div>
</div>
<div class="child">
</div>
</div>
答案 3 :(得分:0)
总而言之,当您在 在容器div的底部,使用透明溶液。否则,添加一个 溢出:容器元素的隐藏声明。底层 这两个选项的想法是您需要一种方法来告知浏览器 将花车纳入其容器元素的高度
答案 4 :(得分:-1)
而不是overflow:hidden;
使用clear:both;
代替<p>
。这里正在使用http://jsfiddle.net/Mvv8w/。基本上overflow:hidden
会清除除clear:both;
之外的所有内容。