在CSS中，overflow: hidden會建立一個新的區塊級格式化上下文嗎？
- WBOY轉載
- 2023-09-10 18:57:02946瀏覽
區塊格式上下文 (BFC) 是 CSS 中網頁佈局的一部分，元素在其中定位並相互互動。簡而言之，它就像一個容器，定義了一組元素在容器內應如何行為的規則。
在本文中，我們將看到「overflow:hidden 是否在 CSS 中建立新的區塊格式化上下文 (BFC)？」
答案是肯定的，因為在CSS中，overflow:hidden屬性可以建立一個新的區塊級格式化上下文（BFC）。當一個HTML元素的overflow值不是visible（預設值）時，它會觸發建立一個新的BFC。 BFC可防止邊距折疊，有助於保持正確的定位，防止意外重疊，並幫助讀者感知兩個不同元素之間的對比。
現在，讓我們來看看以下範例，以了解overflow: hidden對BFC創建的影響−
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>
從輸出結果我們可以看到，容器內的文字超出了邊界。因此，它可能會延伸到容器外部並與網頁上的其他元素重疊，從而破壞佈局。
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屬性，就建立了一個新的BFC。因此，如果文字超過容器的高度將被剪切並隱藏在視圖中。但溢出的文字將保留在容器內。
以上是在CSS中，overflow: hidden會建立一個新的區塊級格式化上下文嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除