overflow:hidden 会在 CSS 中创建新的块格式化上下文 (BFC) 吗?
cssweb developmentfront end technology更新于 2024/11/16 10:20:17
块格式化上下文 (BFC) 是 CSS 中网页布局的一部分，元素在其中定位并相互交互。简而言之，它就像一个容器，定义了一组元素在容器内的行为规则。
在本文中，我们将讨论"overflow:hidden 会在 CSS 中创建新的块格式化上下文 (BFC) 吗?"
答案是肯定的，因为在 CSS 中，overflow:hidden 属性可以创建新的块格式化上下文 (BFC)。当 HTML 元素的 overflow 值不是 visible(默认值)时，就会触发新的 BFC 的创建。 BFC 可以防止外边距折叠，有助于保持正确的定位，防止意外重叠，并帮助读者感知两个不同元素之间的对比。
现在，让我们看以下示例，以了解 overflow: hidden 对创建 BFC 的影响 -
示例
在下面的示例中，我们在没有 CSS overflow:hidden 属性的情况下设置了"容器"的样式 -
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
从输出结果中我们可以看出，容器内的文本溢出了边界。因此，它可能会延伸到容器之外，与网页上的其他元素重叠，从而扰乱布局。
示例
在下面的示例中，我们使用 CSS overflow:hidden 属性来设置"容器"的样式 -
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
overflow: hidden;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
通过向容器添加 overflow:hidden 属性，可以创建一个新的 BFC。因此，如果文本超出容器的高度，它将被裁剪并隐藏在视图之外。但溢出的文本将保留在容器内。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
