数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学CSS 中的 `overflow: hidden` 是否会创建一个新的块级格式化上下文 (BFC)？
块级格式化上下文 (BFC) 是 CSS 中网页布局的一部分，元素在此处进行定位并相互交互。简单来说，它就像一个容器，定义了一组规则来规定元素在容器内应如何表现。
在本文中，我们将探讨“CSS 中的 `overflow: hidden` 是否会创建一个新的块级格式化上下文 (BFC)？”这个问题。
答案是肯定的，因为在 CSS 中，`overflow: hidden` 属性可以创建一个新的块级格式化上下文 (BFC)。当 HTML 元素的 `overflow` 值不是 `visible`（默认值）时，就会触发创建一个新的 BFC。BFC 可以防止 margin 重叠，有助于保持正确的定位，防止意外重叠，并帮助读者感知两个不同元素之间的对比。
现在，让我们来看下面的例子，了解 `overflow: hidden` 对创建 BFC 的影响：
示例
在下面的例子中，我们对“container”进行样式设置，但没有使用 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>
从输出中我们可以看到，容器内的文本溢出了边界。结果，它可能会扩展到容器之外，并与网页上的其他元素重叠，从而破坏布局。
示例
在下面的例子中，我们对“container”使用了 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。结果，如果文本超过容器的高度，将被裁剪并隐藏。但溢出的文本将保留在容器内。
更新于：2023年8月4日
浏览量：104
广告