html - CSS 溢出 :hidden with floats

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 元素一样都是 block 级元素(它们拉伸(stretch)到父宽度的 100%)。这就是为什么如果没有在这些元素上声明宽度或显示，默认情况下 p 将出现在 ul 下方。

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

现在声明 overflow(visible 以外的任何值)建立一个新的 block formatting context ，这使得 ul 包含它的 child 。 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>