塊格式上下文 (BFC) 是 CSS 中網(wǎng)頁布局的一部分，元素在其中定位并相互交互。簡而言之，它就像一個容器，定義了一組元素在容器內(nèi)應如何行為的規(guī)則。
在本文中，我們將看到“overflow:hidden 是否在 CSS 中創(chuàng)建新的塊格式化上下文 (BFC)？”
答案是肯定的，因為在CSS中，overflow:hidden屬性可以創(chuàng)建一個新的塊級格式化上下文（BFC）。當一個HTML元素的overflow值不是visible（默認值）時，它會觸發(fā)創(chuàng)建一個新的BFC。BFC可以防止邊距折疊，有助于保持正確的定位，防止意外重疊，并幫助讀者感知兩個不同元素之間的對比。
現(xiàn)在，讓我們看一下以下示例，以了解overflow: hidden對BFC創(chuàng)建的影響?
Example
的中文翻譯為：
示例
在下面的示例中，我們將“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>
登錄后復制
從輸出結果中我們可以看到，容器內(nèi)的文本超出了邊界。因此，它可能會延伸到容器外部并與網(wǎng)頁上的其他元素重疊，從而破壞布局。
Example
的中文翻譯為：
示例
在下面的示例中，我們使用 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屬性，就創(chuàng)建了一個新的BFC。因此，如果文本超過容器的高度將被剪切并隱藏在視圖中。但溢出的文本將保留在容器內(nèi)。
以上就是在CSS中，overflow: hidden會創(chuàng)建一個新的塊級格式化上下文嗎？的詳細內(nèi)容，更多請關注www.92cms.cn其它相關文章！
