bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合併等等，因此，有了這個特性，我們布局的時候就不會出現意外情況了。
display 屬性為 block, list-item, table 的元素，會產生bfc.
給這些元素新增如下屬性就可以觸發bfc。
-float屬性不為none
-position為absolute或fixed
-display為inline-block, table-cell, table-caption, flex, inline-flex
-overflow不為visible。
bfc布局規則特性：
1.在bfc中，盒子從頂端開始垂直地乙個接乙個地排列.
2.盒子垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰盒子的margin會發生重疊
3.在bfc中，每乙個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。
bfc的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
計算bfc的高度時，自然也會檢測浮動或者定位的盒子高度。
它是乙個獨立的渲染區域，只有block-level box參與， 它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。
對BFC的理解
bfc塊格式化上下文 block formatting context 是web頁面的視覺化css渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。通俗理解bfc是乙個獨立的布局環境，可以理解為乙個容器，在這個容器中按照一定規則進行物品擺放，並且不會影響其外部元素。...
我理解的BFC
恢復內容開始 what bfc block formatting context 塊及格式化上下文 文件給出的定義很多，自己覺得就是一句話，無論內部子元素怎麼變化，都不會影響外部的元素。表現原則 內部的盒子會在垂直方向，乙個接乙個地放置。盒子垂直方向的距離由margin決定。屬於同乙個bfc的兩個相...
對BFC的理解
在解釋 bfc 是什麼之前，需要先介紹 box formatting context的概念。box css布局的基本單位 box 是 css 布局的物件和基本單位，直觀點來說，就是乙個頁面是由很多個 box 組成的。元素的型別和 display 屬性，決定了這個 box 的型別。不同型別的 box，...