26

我在 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用于处理框外的内容，但不明白它在这种情况下如何应用。

4

5 回答 5

45

我试图结束混乱：

ul和元素一样是块级元素p（它们拉伸到父宽度的 100%）。这就是为什么默认情况下，如果没有在这些元素上声明宽度或显示，p则会出现在下方。ul

现在在您的示例中，ul仅包含浮动元素。这使得它折叠到一个高度0px（它仍然具有 100% 的宽度，但正如您在示例中看到的那样）。相邻元素p将出现在浮动元素的右侧，li因为它们被视为正常的浮动元素。

现在声明overflow（除 之外的任何值visible）建立一个新的块格式化上下文，这使得ul包含它的孩子。突然ul“重新出现”，不再有大小0px。p正在被推到底部。您还可以声明position:absolute以实现相同的“清除”效果（副作用是现在s 已从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>

于 2013-04-17T09:33:50.860 回答
13

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

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

于 2013-04-16T15:44:52.100 回答
0

引用HTML 和 CSS 很难

总而言之，当您在容器 div 的底部有一个额外的未浮动 HTML 元素时，请使用 clear 解决方案。否则，向容器元素添加一个溢出：隐藏声明。这两个选项的基本思想是您需要一种方法来告诉浏览器将浮动合并到其容器元素的高度中

于 2019-09-18T14:31:12.533 回答
-1

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

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

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>
于 2013-04-16T15:50:51.723 回答
-1

而不是overflow:hidden;使用clear:both;. <p>这里正在使用http://jsfiddle.net/Mvv8w/。基本上overflow:hidden会清除它旁边的任何东西clear:both;。

于 2013-04-16T15:44:37.520 回答