BFC是個啥？

BFC的定義

BFC究竟是個啥呢？先貼出一段大佬們在分析BFC的時候字面上的理解：

在CSS佈局中，是經過對一個個box的佈局，來實現總體頁面的佈局，這一個個box也就是一個個容器元素，這些元素分爲兩類：塊級元素(block)，行內元素(inline)。 對於不一樣類型的元素，有不一樣的處理規則，這個元素內部的子元素也會用不一樣方式去渲染

BFC中的FC爲formatting context的首字母縮寫，翻譯過來就是「格式化上下文」，它是頁面上的一個渲染區域，並有一套渲染規則，規定了它內部元素的渲染方式 ，而BFC就表示「塊級格式化上下文」。對應的還有IFC,FFC,GFC等

個人理解就是：BFC是一種css渲染規則，規定了塊級元素的渲染規則。運用了BFC渲染規則的元素是一個獨立的渲染區域，和渲染規則，不會影響其餘外部元素的佈局

使用BFC規則後當前元素和內部元素表現

1. BFC內部的Box(塊元素)會在垂直方向，一個接一個地放置
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。
4. BFC的區域不會與float元素區域發生重疊
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算(能夠解決浮動元素的父元素高度塌陷問題)

生成BFC規則的方式（抄自MDN）

1. 根元素(html)默認生成一個BFC
2. 浮動元素（元素的 float 不是 none）
3. 絕對定位元素（元素的 position 爲 absolute 或 fixed）
4. 行內塊元素（元素的 display 爲 inline-block）
5. 表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
6. 表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
7. 匿名錶格單元格元素（元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
8. overflow 值不爲 visible 的塊元素
9. display 值爲 flow-root 的元素
10. contain 值爲 layout、content或 paint 的元素
11. 彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
12. 網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
14. column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中（標準變動，Chrome bug）。

注：BFC包含建立它的元素內部的全部內容

BFC經常使用場景

一，解決浮動的父元素高度塌陷問題

I am a floated box!

I am content inside the container.

.box { background-color: pink; border: 2px solid skyblue; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }

子元素設置float後，父級元素高度塌陷了。根據上面提到的BFC元素在計算高度的時候，會算上其中的浮動元素的高度，因此上面例子中這種狀況，能夠設置父元素爲BFC來解決：

I am a floated box!

I am content inside the container.

.box { background-color: pink; border: 2px solid skyblue; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }

二，解決margin重疊問題

one

two

.mar30{margin:30px;}

根據BFC的獨立，不影響其餘元素佈局的特性，經過設置其中一個元素爲BFC來解決：

one

two

.mar30{margin:30px;} .bfc{display:flow-root;}