CSS溢出：隐藏在浮点数中

Question

我在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如果在这些元素上未声明宽度或显示，它将显示在if 下方的原因。现在在您的示例中，ul仅包含浮动元素。这使其折叠到一个高度0px（尽管如示例中所示，它仍然具有100％的宽度）。相邻元素p将出现在float lis 的右侧，因为它们被视为普通float元素。现在，声明overflow（除以外的任何值visible）将建立一个新的块格式化上下文，从而使ul包含其子级。突然，ul“重新出现”，不再有大小0px。该p是越来越被推到了底部。您还可以声明position:absolute实现相同的“清除”效果（其副作用是，现在ul从普通元素流中删除了，而ps将与重叠ul。）参见小提琴示例如果您对技术感兴趣，请比较CSS规范的相应段落：当'overflow'计算为'visible'和§10.6.7'Auto'高度以进行块格式化上下文根时，正常流中的§10.6.3块级不可替换元素。（感谢BoltClock找出了链接）。ul{&nbsp; &nbsp; list-style-type:none;&nbsp; &nbsp; margin:0; padding:0;&nbsp; &nbsp; background-color:#dddddd;&nbsp; &nbsp; border:2px solid red;}li{&nbsp; &nbsp; float:left;}a{&nbsp; &nbsp; display:block;&nbsp; &nbsp; width:60px;&nbsp; &nbsp; background-color:#555;&nbsp; &nbsp; color:white;}p{&nbsp; &nbsp; margin:0;&nbsp; &nbsp; outline:2px dotted blue;}#two{&nbsp; &nbsp; clear:both;&nbsp; &nbsp; 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&nbsp; </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>