CSS格式化上下文

時間 2019-11-06

標籤 css 格式化上下文欄目 CSS 简体版

原文原文鏈接

FC(formatting context)是CSS規範中的一個概念，指的是頁面佈局中的一塊渲染區域，在這塊區域內有一套渲染規則，用來決定其子元素如何佈局，以及與其餘元素之間的關係和相互做用。普通流中的每一個盒子都會參與到一個FC中，多是BFC，也多是IFC，但不可能便是BFC又是IFC。css

CSS2定義了兩種FC類型：BFC(Block formatting context)和IFC(Inline formatting context)。html

CSS3中又新增了兩種：GFC(grid formatting context)和FFC(flex formatting context)。瀏覽器

BFC 塊級格式化上下文

只有block-level元素參與的渲染區域，BFC規定並管理內部block-level元素的佈局方式。ide

佈局規則

BFC內的盒子均沿着垂直方向逐個排列。佈局
BFC內盒子之間的垂直距離由margin屬性決定，垂直方向上直接相鄰的margin會發生塌陷/合併(不存在padding和border)，而且以最大的margin值做爲最終的margin值。flex

父子元素ui
```
<div style="display:inline-block; border: 1px dotted black;">
    <div style="margin: 10px;">
    <div style="margin: 15px; width: 100px; height: 50px; background-color: blue;"></div>
    </div>
</div>
複製代碼
```
橙色框均表示元素的外邊距。圖1展現的是子元素的外邊距，圖2則是父元素的。可見，父子元素相鄰的垂直外邊距出現合而且最終使用了較大的外邊距，而水平外邊距不存在重疊問題。

兄弟元素spa
```
<div style="border:1px solid black; width: 100px;">
    <div style="margin: 10px; height: 50px; background-color: blue;"></div>
    <div style="margin: 5px; height: 20px; background-color: blue;"></div>
</div>
複製代碼
```
外邊距相同的兄弟元素，相鄰的垂直外邊距發生了合併。圖中兄弟元素的垂直間距不是10px+10px，而是max(10px, 10px)。

空盒子3d
```
<div style="border: 1px solid black; width: 200px;">
	<div style="margin: 10px;"></div>
</div>
複製代碼
```
空盒子的垂直margin直接相鄰，也會發生合併。
BFC內盒子的左外邊緣都會接觸包含塊的左邊緣(若是從右到左進行排版，那麼右邊發生接觸)，即便存在浮動盒子也是如此。code
BFC的內容不會與浮動元素髮生重疊，且浮動元素也會參與BFC的高度計算。
BFC是一個隔離的獨立容器，容器裏面的子元素不會影響外面的元素，反過來也同樣。

如何觸發BFC

根元素<html>
浮動元素(float不爲none)
絕對定位元素(position爲absolute或fixed)
overflow不爲visible的塊元素
內聯塊元素、表格單元格、表格標題(display爲inline-block/table-cell/table-caption)
彈性元素(display爲flex或inline-flex元素的直接子元素)

知足上述任一條件便可在其內部產生BFC。(更多詳細的可參考MDN文檔)

做用

防止外邊距合併

根據BFC佈局規則： 同一個BFC內相鄰盒子之間的外邊距會發生合併。

建立新的BFC，不屬於同一個BFC的盒子不會出現外邊距合併。

<div style="border:1px solid black; width: 100px;">
    <div style="margin: 10px; height: 50px; background-color: blue;"></div>
    <!--建立新的BFC-->
    <div style="overflow: hidden;">
        <div style="margin: 10px; height: 20px; background-color: blue;"></div>
    </div>
</div>
複製代碼

清除內部浮動

根據BFC佈局規則： BFC內浮動元素也會參與BFC的高度計算。

<div style="border: 2px solid black; width: 200px;">
    <div style="float: left; width: 50px; height: 150px; background-color: red;">浮動</div>
    <div style="height: 100px; background-color: blue;"></div>
</div>
複製代碼

在包含塊內存在一個浮動元素。浮動元素脫離文檔流存在，所以包含塊沒有辦法「掌握」整個浮動元素。一旦浮動元素的高度大於它旁邊的元素，那它會穿透包含塊。

經過設置overflow: hidden或display: inline-block等方式，在包含浮動元素的容器內建立BFC。BFC在計算高度的時候會將識別並計算浮動元素，效果至關於清除內部浮動。

<!--overflow: hidden-->
<div style="overflow: hidden;border: 2px solid black; width: 200px;">
    <div style="float: left; width: 50px; height: 150px; background-color: red;">浮動</div>
    <div style="height: 100px; background-color: blue;"></div>
</div>
複製代碼

自適應兩欄佈局

根據BFC的佈局規則： BFC的內容不會與浮動元素髮生重疊。

<div style="overflow: hidden;border: 2px solid black; width: 200px;">
    <div style="float: left; width: 50px; height: 100px; background-color: red;">浮動</div>
    <div style="height: 100px; background-color: blue;">這是一段內容。</div>
</div>
複製代碼

BFC的內容環繞在浮動元素周圍，不會與其發生重疊，能夠經過這種方式實現自適應兩欄/多欄的佈局。

IFC 內聯格式化上下文

只有inline-level元素參與的渲染區域，IFC規定並管理inline-level元素的佈局方式。

佈局規則

盒子沿着水平方向逐個排列。
只會計算盒子水平方向上的margin、border和padding，而不會計算垂直方向上的。
在垂直方向上，盒子有多種對齊方式(vertical-align)：能夠top對齊，或者bottom對齊，也能夠經過文本基線(baseline)對齊。
能把一行的盒子徹底包含進去的方形區域，被稱爲行框(line box)。
行框的高度由CSS行高計算規則肯定，並且同個IFC內的行框高度通常不一樣(行框內最高元素的高度可能不一樣)。
行框一般是左右邊緊貼包含塊，但會由於浮動元素的存在而發生變化。行框的寬由包含塊和存在的浮動元素決定，浮動元素可能致使行框寬度變小。若是行框內全部盒子的總寬度小於行框的寬度，那行框內盒子的水平分佈方式由text-align屬性決定(若是這個屬性是justify，那瀏覽器會對inline元素內的文本和空格進行拉伸，注意不是inline-table和inline-block)。
若是一個行框沒法容納多個inline元素，那他們會被分佈到兩個或多個垂直堆疊的行框內。
若是一個inline元素的寬度超過行框能容納的寬度，那它會被切割成若干盒子而後跨行框分佈，並且被切割處margins, borders, 和padding均不生效(e.g.段落)。若是這個inline元素不能被分割(e.g.單個單詞/work breaking規則被禁用/受行框內white-space爲nowrap或pre的影響)，那麼這個inline元素會直接溢出行框。