`overflow:hidden` 如何影响 `` 中的浮动元素和后续文本放置？

CSS溢出：用浮动解释隐藏

问题：溢出属性如何影响文本相对的位置到包含浮动的 ul元素？

说明：

默认情况下，像 ul 和 p 这样的块级元素会拉伸到父宽度的 100%。在给定的示例中，ul 仅包含浮动的 li 元素，导致其折叠到 0px 的高度，同时仍保持其完整宽度。

因此，相邻的 p 元素出现在浮动的右侧li 元素，将它们视为普通浮点数。

但是，当overflow:hidden 应用于 ul 时，它会建立一个新的块格式化上下文（BFC），它有效地包含ul 中的 li 元素。这可以防止 ul 折叠并强制将 p 元素推到底部，从而清除浮动的 li 元素。

技术细节：

根据 CSS 规范，当正常流中块级非替换元素可见溢出时，它们的行为与标准块元素相同。但是，将溢出设置为任何不可见值（包括隐藏）都会创建 BFC，从而导致不同的行为。

示例：

考虑以下代码：

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;
}

没有溢出：

<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>

溢出：

<ul>

如您所见，将溢出：隐藏到 ul 会强制浮动 li 元素包含在 ul 中并清除 p 元素，将其推到页面底部。

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