格式化上下文簡介
本文介紹了格式化上下文的概念，它有多種型別，包括塊級格式化上下文、行內格式化上下文和彈性格式化上下文。文章還介紹了它們的基本行為以及如何利用這些行為。
頁面上的每個元素都屬於一個格式化上下文，或者一個被定義為以特定方式佈局內容的區域。一個塊級格式化上下文（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的元素 - 彈性專案
- 網格專案
- 多列容器
column-span設定為all的元素
這很有用，因為新的BFC將表現得像最外層文件一樣，它成為主佈局中的一個迷你佈局。一個BFC包含它內部的所有內容，float和clear只適用於同一格式化上下文中的專案，並且邊距只在同一格式化上下文中的元素之間摺疊。
BFC建立示例
讓我們看幾個例子，以瞭解建立新BFC的效果。
在下面的例子中，我們有一個浮動元素在一個帶有邊框的<div>內部。該<div>的內容與浮動元素並排浮動。由於浮動元素的內容比其旁邊內容高，所以<div>的邊框現在穿過了浮動元素。正如流內和流外元素指南中所解釋的，浮動元素已被移出流，因此div的背景和邊框只包含內容，而不包含浮動元素。
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
body {
font: 1.2em sans-serif;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 200px;
height: 100px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
建立一個新的BFC將包含浮動元素。過去常用的方法是將overflow: auto或將overflow: visible的初始值設定為其他值。
body {
font: 1.2em sans-serif;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
overflow: auto;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
設定overflow: auto建立了一個包含浮動元素的新BFC。我們的<div>現在成為我們佈局中的一個迷你佈局。任何子元素都將被包含在其中。
使用overflow建立新BFC的問題是，overflow屬性旨在告訴瀏覽器如何處理溢位內容。在某些情況下，當您純粹為了建立BFC而使用此屬性時，您會發現出現不需要的捲軸或剪裁的陰影。此外，對於未來的開發人員來說，它的可讀性可能不高，因為您使用overflow的目的可能不明顯。如果您這樣做，最好在程式碼中添加註釋進行解釋。
使用display: flow-root顯式建立BFC
在包含塊上使用display: flow-root（或display: flow-root list-item）將建立一個新的BFC，而不會產生任何其他潛在的問題副作用。
body {
font: 1.2em sans-serif;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
display: flow-root;
}
在<div>上設定display: flow-root後，該容器內的所有內容都將參與該容器的塊級格式化上下文，浮動元素不會從元素底部溢位。
flow-root關鍵字的名稱指的是您正在建立的本質上類似於一個新的根元素（就像<html>所做的那樣），考慮到新上下文的建立方式及其流佈局功能。
行內格式化上下文
行內格式化上下文存在於其他格式化上下文內部，可以被認為是段落的上下文。段落建立了一個行內格式化上下文，在該上下文中，諸如<strong>、<a>或<span>元素用於文字。
盒模型不完全適用於參與行內格式化上下文的專案。在水平書寫模式的行中，水平內邊距、邊框和外邊距將應用於元素並向左右推開文字。但是，元素上方和下方的外邊距將不會被應用。垂直內邊距和邊框將被應用，但可能會與上方和下方的內容重疊，因為在行內格式化上下文中，行框不會被內邊距和邊框推開。
<p>
Before that night—<strong>a memorable night</strong>, as it was to
prove—hundreds of millions of people had watched the rising smoke-wreaths of
their fires without drawing any special inspiration from the fact.
</p>
body {
font: 1.2em sans-serif;
}
p {
margin-top: 2em;
}
strong {
margin: 20px;
padding: 20px;
border: 5px solid rebeccapurple;
}
其他格式化上下文
本指南涵蓋流佈局，因此不涉及其他可能的格式化上下文。因此，瞭解建立任何型別的格式化上下文都會改變該格式化上下文內部元素行為的方式非常有用。這種行為始終在規範和MDN上進行描述。
總結
在本指南中，我們更詳細地研究了塊級和行內格式化上下文以及建立塊級格式化上下文（BFC）的重要主題。在下一個指南中，我們將瞭解正常流如何與不同的書寫模式互動。