BFC的定義
BFC到底是個(gè)啥呢？先貼出一段大佬們在分析BFC的時(shí)候字面上的理解：
在CSS布局中，是通過(guò)對一個(gè)個(gè)box的布局，來(lái)實(shí)現整體頁(yè)面的布局，這一個(gè)個(gè)box也就是一個(gè)個(gè)容器元素，這些元素分為兩類(lèi)：塊級元素(block)，行內元素(inline)。 對于不同類(lèi)型的元素，有不同的處理規則，這個(gè)元素內部的子元素也會(huì )用不同方式去渲染
BFC中的FC為formatting context的首字母縮寫(xiě)，翻譯過(guò)來(lái)就是“格式化上下文”，它是頁(yè)面上的一個(gè)渲染區域，并有一套渲染規則，規定了它內部元素的渲染方式 ，而B(niǎo)FC就表示“塊級格式化上下文”。對應的還有IFC,FFC,GFC等
我的理解就是：BFC是一種css渲染規則，規定了塊級元素的渲染規則。運用了BFC渲染規則的元素是一個(gè)獨立的渲染區域，和渲染規則，不會(huì )影響其他外部元素的布局
使用BFC規則后當前元素和內部元素表現
- BFC內部的Box(塊元素)會(huì )在垂直方向，一個(gè)接一個(gè)地放置
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì )發(fā)生重疊
- 每個(gè)元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動(dòng)元素也是如此。
- BFC的區域不會(huì )與float元素區域發(fā)生重疊
- BFC就是頁(yè)面上的一個(gè)隔離的獨立容器，容器里面的子元素不會(huì )影響到外面的元素。反之也如此。
- 計算BFC的高度時(shí)，浮動(dòng)元素也參與計算(可以解決浮動(dòng)元素的父元素高度塌陷問(wèn)題)
生成BFC規則的方式（抄自MDN）
- 根元素(html)默認生成一個(gè)BFC
- 浮動(dòng)元素（元素的 float 不是 none）
- 絕對定位元素（元素的 position 為 absolute 或 fixed）
- 行內塊元素（元素的 display 為 inline-block）
- 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）
- 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
- 匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
- overflow 值不為 visible 的塊元素
- display 值為 flow-root 的元素
- contain 值為 layout、content或 paint 的元素
- 彈性元素（display為 flex 或 inline-flex元素的直接子元素）
- 網(wǎng)格元素（display為 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
- column-span 為 all 的元素始終會(huì )創(chuàng )建一個(gè)新的BFC，即使該元素沒(méi)有包裹在一個(gè)多列容器中（標準變更，Chrome bug）。
注：BFC包含創(chuàng )建它的元素內部的所有內容
BFC常用場(chǎng)景
一，解決浮動(dòng)的父元素高度塌陷問(wèn)題
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元素在計算高度的時(shí)候，會(huì )算上其中的浮動(dòng)元素的高度，所以上面例子中這種情況，可以設置父元素為BFC來(lái)解決：
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重疊問(wèn)題
one
two
.mar30{margin:30px;}
根據BFC的獨立，不影響其他元素布局的特性，通過(guò)設置其中一個(gè)元素為BFC來(lái)解決：
one
two
.mar30{margin:30px;} .bfc{display:flow-root;}
