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如果在这些元素上没有声明宽度或显示,则会出现在下面.

现在在您的示例中,ul仅包含浮动元素.这使它崩溃到高度0px(虽然在示例中可以看到,但它仍然具有100%的宽度).相邻的p将出现在浮动lis 的右侧,因为它们被认为是正常的浮动元素.

现在声明overflow(除了之外的任何值visible)建立一个新的块格式化上下文,这使得ul包含它的子元素.突然间ul"重新出现",不再有大小0px了.该p是越来越被推到了底部.您还可以声明position:absolute实现相同的"清除"效果(现在ul从正常元素流中取出的副作用- ps将与ul.重叠.)

查看示例小提琴

如果你是技术人员,请比较CSS规范的相应段落:

§10.6.3"溢出"计算为"可见"时的正常流程中的块级非替换元素
和
块格式化上下文根的§10.6.7"自动"高度.(感谢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