CSS溢出:隐藏浮动

时间:2013-04-16 15:37:22

标签: html css overflow

我阅读了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用于处理开箱即用的内容,但不了解它在这种情况下的应用方式。

5 个答案:

答案 0 :(得分:32)

我试图结束混乱:

ulp元素一样是块级元素(它们延伸到父宽度的100%)。这就是为什么默认情况下,如果在这些元素上没有声明宽度或显示,p将显示在ul下方。

现在,在您的示例中,ul仅包含浮动元素。这使它折叠到0px的高度(尽管如您在示例中所示,它仍具有100%的宽度)。相邻的p将出现在浮动的li的右侧,因为它们被视为正常的浮动元素。

现在声明overflowvisible以外的任何值)会建立新的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的元素内浮动的元素。

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

答案 2 :(得分:0)

这就是为什么w3schools不是网页设计师/开发人员的可靠来源。你是对的,这是一个可怕的例子。

它不是因为,在这个例子中,父元素没有固定的。此外,它是一个无序的列表标签,无论如何都要扩展到它的孩子的大小。

http://jsfiddle.net/EhphH/

<强> 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)

引用HTML & CSS Is Hard

  

总而言之,当您在   在容器div的底部,使用透明溶液。否则,添加一个   溢出:容器元素的隐藏声明。底层   这两个选项的想法是您需要一种方法来告知浏览器   将花车纳入其容器元素的高度

答案 4 :(得分:-1)

而不是overflow:hidden;使用clear:both;代替<p>。这里正在使用http://jsfiddle.net/Mvv8w/。基本上overflow:hidden会清除除clear:both;之外的所有内容。