格式化上下文簡介

本文介紹了格式化上下文的概念，它有多種型別，包括塊級格式化上下文、內聯格式化上下文和彈性格式化上下文。還介紹了它們的基本行為以及如何利用這些行為。

頁面上的所有內容都是 **格式化上下文** 的一部分，或者說是一個為以特定方式佈局內容而定義的區域。**塊級格式化上下文** (BFC) 會根據塊級佈局規則佈局子元素，**彈性格式化上下文** 會將子元素佈局為 彈性專案 等。每個格式化上下文都有關於該上下文中的佈局行為的特定規則。

塊級格式化上下文

使用塊級佈局規則的文件中最外層的元素建立第一個或 **初始塊級格式化上下文**。這意味著 <html> 元素的塊內每個元素都根據正常流進行佈局，遵循塊級和內聯佈局的規則。參與 BFC 的元素使用 CSS 盒子模型概述的規則，該模型定義了元素的邊距、邊框和填充如何與同一上下文中的其他塊互動。

建立新的塊級格式化上下文

<html> 元素不是唯一能夠建立塊級格式化上下文的元素。任何塊級元素都可以透過應用某些 CSS 屬性來建立 BFC。

在以下情況下會建立一個新的 BFC

  • 使用 float 使元素浮動
  • 絕對定位 的元素
  • 具有 display: inline-block 的元素
  • 表格單元格或具有 display: table-cell 的元素，包括使用 display: table-* 屬性建立的匿名錶格單元格
  • 表格標題或具有 display: table-caption 的元素
  • overflow 具有 visible 以外的值的塊級元素
  • 具有 display: flow-root 或 display: flow-root list-item 的元素
  • 具有 contain: layout、content 或 strict 的元素
  • 彈性專案
  • 網格專案
  • 多列容器
  • 具有設定為 all 的 column-span 的元素

這很有用，因為新的 BFC 的行為就像最外層的文件一樣，它成為主佈局中的一個迷你佈局。BFC 包含其中的所有內容，float 和 clear 只適用於同一格式化上下文中的專案，邊距只會在同一格式化上下文中的元素之間摺疊。

BFC 建立示例

讓我們看一下其中幾個，看看建立新 BFC 的效果。

在下面的示例中，我們有一個在帶邊框的 `<div>` 中的浮動元素。該 `<div>` 的內容與浮動元素並排浮動。由於浮動內容的高度比其旁邊的內容高，因此 `<div>` 的邊框現在穿過浮動元素。正如關於流內和流外元素的指南中所述，浮動元素已從流中移除，因此 `div` 的背景和邊框僅包含內容，而不包含浮動元素。

建立新的 BFC 將包含浮動元素。過去常用的方法是設定 `overflow: auto` 或設定除 `overflow: visible` 的初始值以外的其他值。

設定 `overflow: auto` 建立了一個包含浮動元素的新 BFC。現在，我們的 `<div>` 成為佈局內部的迷你佈局。任何子元素都將包含在其中。

使用 `overflow` 建立新 BFC 的問題在於，`overflow` 屬性用於告訴瀏覽器您希望如何處理溢位內容。在某些情況下，您會發現當純粹使用此屬性建立 BFC 時，會出現不需要的捲軸或裁剪的陰影。此外，它可能對未來的開發人員來說可讀性不強，因為他們可能不清楚為什麼您將 `overflow` 用於此目的。如果您這樣做，最好對程式碼進行註釋以說明原因。

使用 `display: flow-root` 明確建立 BFC

在包含塊上使用 `display: flow-root`（或 `display: flow-root list-item`）將建立新的 BFC，而不會產生任何其他潛在的負面影響。

在 <div> 上使用 `display: flow-root`，該容器內的所有內容都參與該容器的塊級格式化上下文，並且浮動元素不會從元素底部探出。

flow-root 關鍵字的名稱指的是，您正在建立的東西本質上就像一個新的根元素（比如 <html>），考慮到新上下文是如何建立的以及它的流式佈局功能。

內聯格式化上下文

行內格式化上下文存在於其他格式化上下文內部，可以被認為是段落的上下文。段落建立一個行內格式化上下文，其中使用諸如 <strong>、<a> 或 <span> 這樣的元素來處理文字。

盒子模型並不完全適用於參與行內格式化上下文的專案。在水平書寫模式行中，水平填充、邊框和邊距將應用於元素並將文字向左和向右推開。但是，元素上下的邊距不會應用。垂直填充和邊框將應用，但可能會與上下內容重疊，因為在行內格式化上下文中，行框不會被填充和邊框推開。

其他格式化上下文

本指南涵蓋流式佈局，因此不涉及其他可能的格式化上下文。因此，瞭解建立任何型別的格式化上下文都會改變該格式化上下文內元素的行為非常有用。這種行為始終在規範中描述，並且也在這裡在 MDN 上描述。

總結

在本指南中，我們更詳細地介紹了塊級和行內格式化上下文以及建立塊級格式化上下文 (BFC) 的重要主題。在下一份指南中，我們將瞭解正常流如何與不同的書寫模式互動。

另請參閱