小编典典

CSS溢出:隐藏在浮点数中

html

我在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用于处理超出范围的内容,但不了解它在这种情况下如何应用。


阅读 313

收藏
2020-05-10

共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>
2020-05-10