神奇的BFC

2022-08-05 12:30:13 字數 1116 閱讀 4683

bfc(block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域,只有block-level box參與, 它規定了內部的block-level box如何佈局,並且與這個區域外部毫不相干。
根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

內部的box會在垂直方向,一個接一個地放置。

box垂直方向的距離由margin決定。屬於同一個bfc的兩個相鄰box的margin會發生重疊

每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。

bfc的區域不會與float box重疊。

bfc就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。

計算bfc的高度時,浮動元素也參與計算

自適應兩欄佈局

根據“每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。”, 所以元素佈局如下:

雖然存在浮動的元素aslide,但main的左邊依然會與包含塊的左邊相接觸。

根據bfc佈局規則第四條:bfc的區域不會與float box重疊。我們可以通過通過觸發main生成bfc, 來實現自適應兩欄佈局。當觸發main生成bfc後,這個新的bfc不會與浮動的aside重疊。因此會根據包含塊的寬度,和aside的寬度,自動變窄。效果如下:

.main
清除內部浮動

根據bfc佈局規則第六條:計算bfc的高度時,浮動元素也參與計算。為達到清除內部浮動,我們可以觸發par生成bfc,那麼par在計算高度時,par內部的浮動元素child也會參與計算。

.par
效果如下:

BFC 神奇背後的原理

bfc 是box formatting context的縮寫。 bfc 定義 bfc block formatting context 直譯為 塊級格式化上下文 。它是一個獨立的渲染區域,只有block level box參與, 它規定了內部的block level box如何佈局,並且與這個區域外...

前端精選文摘 BFC 神奇背後的原理

bfc 已經是一個耳聽熟聞的詞語了,網上有許多關於 bfc 的文章,介紹瞭如何觸發 bfc 以及 bfc 的一些用處 如清浮動,防止 margin 重疊等 。雖然我知道如何利用 bfc 解決這些問題,但當別人問我 bfc 是什麼,我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2 1 spe...

前端精選文摘 BFC 神奇背後的原理

bfc 已經是一個耳聽熟聞的詞語了,網上有許多關於 bfc 的文章,介紹瞭如何觸發 bfc 以及 bfc 的一些用處 如清浮動,防止 margin 重疊等 。雖然我知道如何利用 bfc 解決這些問題,但當別人問我 bfc 是什麼,我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2 1 spe...