CSS溢出：用浮动隐藏

Question

我阅读了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 用于处理超出框框的内容，但不明白它在这种情况下如何应用。

Answer 1

我试图结束混乱：

ul 是块级元素，p 元素也是如此（它们拉伸到父宽度的 100%）。这就是为什么默认情况下p 将出现在ul 下方，如果这些元素上没有声明宽度或显示。

现在在您的示例中，ul 仅包含浮动元素。这使它折叠到0px 的高度（尽管如您在示例中看到的那样，它仍然具有 100% 的宽度）。相邻的p 将出现在浮动lis 的右侧，因为它们被视为普通浮动元素。

现在声明overflow（visible 以外的任何值）会建立一个新的block formatting context，这使得ul 包含其子项。突然ul“重新出现”，不再具有0px 的大小。 p 被推到底部。您还可以声明 position:absolute 以实现相同的“清除”效果（副作用是现在 ul 已从正常元素流中取出 - ps 将与 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>

Answer 2

在元素上设置 overflow: hidden 会导致创建新的浮动上下文，因此在应用了 overflow: hidden 的元素内浮动的元素将被清除。

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

Answer 3

引用HTML & CSS Is Hard

总而言之，当您在 容器 div 的底部，使用透明溶液。否则，添加一个 溢出：容器元素的隐藏声明。底层证券 这两个选项的想法是您需要一种方法来告诉浏览器 将浮动合并到其容器元素的高度中

Answer 4

使用clear:both; 代替overflow:hidden; 代替<p>。这里正在使用http://jsfiddle.net/Mvv8w/。基本上overflow:hidden 会像clear:both; 一样清除它旁边的任何东西。

Answer 5

这就是为什么 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>