資料結構
網路
關係資料庫管理系統 (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
廣告