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{

    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>