解析 CSS 格式化上下文

⭐️ 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

✴️ BFC 塊級格式化上下文

BFC(Block Formatting Contexts)，塊級格式化上下文。BFC 實際上就是頁面中一塊渲染區域，該區域與其餘區域隔離開來。容器裏面子元素不會影響到外部，外部的元素也不會影響到容器裏面的子元素。 🦊

規範

BFC 內部的盒子會從上至下一個接着一個順序排列。BFC 內的垂直方向的盒子距離以 margin 屬性爲準，上下 margin 會疊加。每一個元素的左側最外層邊界與包含塊 BFC 的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。BFC 的區域不會與 float box 摺疊。BFC 的高度也會受到浮動元素的影響，浮動元素參與計算。 🚩

主要做用

• 建立獨立的渲染環境
• 防止因浮動致使的高度塌陷
• 防止上下相鄰的外邊距摺疊

如何建立 BFC

• html 元素自己就是 BFC
• display === flow-root/inline-block/table-cell/table-caption/table/table-row/table-row-group/table-header-group/table-footer-group/inline-table/flex/inline-flex/grid/inline-grid
• position === absolute/fixed
• contain === strict/layout/paint/content
• float !== none
• overflow !== visible ✔️ 最經常使用
• column-count !== auto
• column-width !== auto
• column-span === all

display 爲 table 會產生一個匿名的 table-cell；display 爲 flow-rot 是一種 flow 佈局，在 CSS2 中被引入。contain 屬性能夠更有效率的渲染元素，但兼容性差，詳情見：developers.google.com/web/updates… 佈局、grid 佈局產生的格式化上下文，有時也被人稱爲 FFC/GFC

幾個例子

防塌陷 🌰

div {
    border: 1px solid gray;
    /* overflow: hidden; */
}
p {
    float: left;
}
複製代碼

<div>
    <p>✈</p>
</div>
複製代碼

建立 BFC 後

避免摺疊 🌰

div:nth-of-type(2) {
    background: red;
    /* overflow: hidden; */
}
.this {
    border: 1px solid gray;
    margin: 20px 0;
}
複製代碼

<div class="this">1️⃣</div>
<div>
    <div class="this">2️⃣</div>
</div>
複製代碼

建立 BFC 後

✳️ IFC 內聯格式化上下文

IFC(Inline Formatting Contexts)，內聯格式化上下文。IFC 中的 line-box （也稱行盒）的高度是根據包含行內元素中最高的實際高度計算而來。（不受垂直方向的 padding/margin 的影響） 🚸

相關知識點

頂點、中線、基線、底線，以及行距、半行距、font-size 大小、line-height 大小見圖：

• inline-box 行內框，高度由 font-size 決定
• line-box 行框，高度由該行框內最大高度的行內框決定
• content area 內容區域，高度是 font-size 和 padding 的和
• containing box 包含框，最外層的包裹盒子

line-height 的計算方法：

• 固定值，若是設置了固定的值，如 20px，那麼行高即爲 20px
• 百分比，當前 font-size * 百分比，即爲行高
• normal 或數字，normal 則是瀏覽器默認設置的值，通常爲 1.2，若是是自定義的數值，好比 1.5，那麼行高即爲 font-size * 1.5

有關 line-height 的計算方法見這篇文章 segmentfault.com/a/119000000…

規範

行內元素從包含塊頂端水平方向上逐一排列，水平方向上的 margin/border/padding 生效。行內元素在垂直方向上可按照頂部、底部或基線對其。

當幾個行內元素不能在一個單獨的行盒中水平放置時，他們會被分配給兩個或更多的(vertically-stacked line boxes)垂直棧上的行盒，所以，一個段落是不少行盒的垂直棧。這些行盒不會在垂直方向上被分離（除非在其餘地方有特殊規定），而且他們也不重疊。

• 垂直方向上，當行內元素的高度比行盒要低，那麼 vertical-align 屬性決定垂直方向上的對齊方式。
• 水平方向上，當行內元素的總寬度比行盒要小，那麼行內元素在水平方向上的分部由 text-align 決定。
• 水平方向上，當行內元素的總寬度超過了行盒，那麼行內元素會被分配到多個行盒中去，若是設置了不可折行等屬性，那麼行內元素會溢出行盒。
• 行盒的左右兩邊都會觸碰到包含塊，而 float 元素則會被放置在行盒和包含快邊緣的中間位置。

折行：

<p>balabala ...<span class="hl">hello world</span> inline formating context</p>
複製代碼

空間不足的折行：

主要做用

• 行內元素按照 text-align 進行水平居中
• 行內元素撐開父元素高度，經過 vertical-align 屬性進行垂直居中

水平垂直居中 🌰

<p>hello <span class="big">world</span> inline formating context</p>
複製代碼

p {
    border: 1px solid gray;
    text-align: center;
}

.big {
    font-size: 60px;
    vertical-align: middle;
}
複製代碼

其餘還有 GFC、FFC 就是二維的網格佈局和自適應的 Flex 佈局。兩種佈局產生網格佈局格式化上下文和自適應格式化上下文。

參考：

• developer.mozilla.org/en-US/docs/…
• segmentfault.com/a/119000000…
• www.w3.org/TR/CSS2/vis…

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊