對BFC的理解

bfc

塊格式化上下文（block formatting context），是web頁面的視覺化css渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。

bfc是乙個獨立的布局環境，可以理解為乙個容器，在這個容器中按照一定規則進行物品擺放，並且不會影響其外部元素。

如果乙個元素符合出發bfc的條件，則bfc中的元素布局不受外部影響。

浮動元素會建立bfc，則浮動元素內部子元素受該浮動元素影響，所以兩個浮動元素之間是互不影響的。

bfc是乙個獨立的容器，它不會影響其外部元素，外部元素也無法影響到它。

bfc內部的元素從頂部開始乙個接乙個垂直排列，盒子之間的間距是由margin決定的。

在同乙個bfc中，兩個相鄰的塊級盒子的垂直外邊距會發生重疊。

bfc區域不會和float box發生重疊，因為float box也屬於bfc

bfc能夠識別幷包含浮動元素，當計算其區域的高度時，浮動元素也可以參與計算。

解決高度塌陷：浮動元素會脫離文件流（絕對定位也會脫離文件流），導致無法計算準確的高度

解決方式：在容器中建立bfc

需要注意的是：

相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的垂直邊距相遇時， 它們將形成乙個外邊距。這個外邊距的高度等於兩個發生摺疊的外邊距的高度中的較大者。

注意外邊距摺疊的條件是margin必須相鄰

摺疊外邊距的取值

//方式一
//方式二

參考部落格：

對BFC的理解

在解釋 bfc 是什麼之前，需要先介紹 box formatting context的概念。box css布局的基本單位 box 是 css 布局的物件和基本單位，直觀點來說，就是乙個頁面是由很多個 box 組成的。元素的型別和 display 屬性，決定了這個 box 的型別。不同型別的 box，...

我理解的BFC

恢復內容開始 what bfc block formatting context 塊及格式化上下文 文件給出的定義很多，自己覺得就是一句話，無論內部子元素怎麼變化，都不會影響外部的元素。表現原則 內部的盒子會在垂直方向，乙個接乙個地放置。盒子垂直方向的距離由margin決定。屬於同乙個bfc的兩個相...

就針對BFC的理解

bfc是什麼？首先說一下bfc是什麼，概念從 來？bfc全稱叫做 block formatting context 中文叫塊級格式化上下文，是乙個網頁的概念。網頁是乙個乙個盒子組成的，那麼這個bfc到底有什麼用途呢？看下面具體分析。怎麼觸發bfc 根元素浮動元素 float 除 none 以外的值 ...