'overflow:hidden”如何影响浮动元素和后续内容？

CSS 溢出：用浮点隐藏

了解 Overflow 属性的影响

CSS 中的 Overflow 属性指定处理方式超出其包含元素边界的内容。当应用于具有浮动子元素的元素时，它会建立一个新的块格式化上下文。

对文本放置的影响

考虑以下代码片段：

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 之后的段落 (p) 元素将被推到底部，因为 ul 是块级元素。但是，当 ul 上的溢出设置为隐藏时，会发生以下情况：

• ul 建立一个块格式化上下文，包含其浮动子元素（lis）。
• ul“重新出现”并且不再折叠到 0px 的高度。
• 段落 (p) 被推到末尾ul 的内容，出现在浮动元素之后。

这是因为 Overflow:hidden 创建了一个新的格式化环境，其中 ul 充当块级元素，包含其子元素。

技术解释

根据CSS规范：

• 当溢出“可见”时：“非替换的块级元素不会建立新的块格式化上下文，无论其浮动属性如何。” ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• 当溢出设置为不可见时' value: "块格式化上下文由任何子树的根元素建立，其根元素是内联级或原子内联级元素的子列表的根，该元素是浮动、绝对定位或具有“可见”以外的“溢出”。” ([§10.6.7](https://www.w3.org/TR/CSS21/visudet.html#containing-block))

在 ul 上设置 Overflow:hidden 会创建一个新的阻止格式化上下文，使其包含其子元素并将段落推到底部。

以上是'overflow:hidden”如何影响浮动元素和后续内容？的详细内容。更多信息请关注PHP中文网其他相关文章！