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元素一样是块级元素（它们延伸到父宽度的100％）。这就是为什么默认情况下，如果在这些元素上没有声明宽度或显示，p将显示在ul下方。

现在，在您的示例中，ul仅包含浮动元素。这使它折叠到0px的高度（尽管如您在示例中所示，它仍具有100％的宽度）。相邻的p将出现在浮动的li的右侧，因为它们被视为正常的浮动元素。

现在声明overflow（visible以外的任何值）会建立新的block formatting context，这会使ul包含其子项。突然，ul“重新出现”，不再有0px大小。 p被推到了最底层。您还可以声明position:absolute以实现相同的“清除”效果（现在ul从正常元素流中取出的副作用 - p将重叠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>

Answer 2

在元素上设置overflow: hidden会导致创建新的float上下文，因此将清除在已应用overflow: hidden的元素内浮动的元素。

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 3

这就是为什么w3schools不是网页设计师/开发人员的可靠来源。你是对的，这是一个可怕的例子。

它不是因为，在这个例子中，父元素没有固定的。此外，它是一个无序的列表标签，无论如何都要扩展到它的孩子的大小。

http://jsfiddle.net/EhphH/

<强> CSS

.parent {
    width: 150px;
    height: 100px;
    padding: 10px;
    background: yellow;
    overflow: hidden;

}
.child {
    float: left;
    width: 75px;
    height: 120px;
    margin: 10px;
    background: blue;

}
.baby {
    width: 200px;
    height: 25px;
    background: green;
}

<强>标记

<div class="parent">
    <div class="child">
        <div class="baby">
        </div>
    </div>
    <div class="child">
    </div>
</div>

Answer 4

引用HTML & CSS Is Hard

总而言之，当您在在容器div的底部，使用透明溶液。否则，添加一个溢出：容器元素的隐藏声明。底层这两个选项的想法是您需要一种方法来告知浏览器将花车纳入其容器元素的高度

Answer 5

而不是overflow:hidden;使用clear:both;代替<p>。这里正在使用http://jsfiddle.net/Mvv8w/。基本上overflow:hidden会清除除clear:both;之外的所有内容。

CSS溢出：隐藏浮动

5 个答案: