极客笔记CSS 是否overflow：hidden会创建一个新的块格式化上下文
块格式化上下文（BFC）是CSS中网页布局的一部分，其中元素被定位并相互作用。简单来说，它就像一个容器，定义了元素在容器内如何行为的一组规则。
在本文中，我们将看到”是否overflow：hidden会创建一个新的块格式化上下文（BFC）”。
答案是肯定的，因为在CSS中，overflow：hidden属性可以创建一个新的块格式化上下文（BFC）。当HTML元素的overflow属性值不是visible（默认值）时，它会触发创建一个新的BFC。BFC可防止折叠边距，有助于保持正确的定位，防止意外重叠，并帮助读者感知两个不同元素之间的对比。
现在，让我们看一下以下示例，以了解overflow：hidden对创建BFC的影响-
示例1
在下面的示例中，我们使用不带CSS overflow：hidden属性来设置”container”的样式-
<!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>
从输出结果可以看出，容器内的文本超出了边界。因此，它可能会超出容器并与网页上的其他元素重叠，这可能会破坏布局。
示例2
在下面的示例中，我们使用CSS的overflow:hidden属性来样式化”container”。
<!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。结果是，如果文字超过容器的高度，它将被裁剪并隐藏起来。但是溢出的文字将保持在容器内。