1、BFC是什么？
在頁面布局時，經(jīng)常會出現(xiàn)以下幾種情況：
這個元素高度怎末沒了？
這兩欄布局怎末沒法自適應(yīng)？
這兩個元素的間距怎末有點奇怪的樣子？
…
原因就是元素之間互相影響，導(dǎo)致了意料之外的情況，這里就涉及到了BFC的概念。
BFC（Block Formatting Context），即塊級格式化上下文，它是頁面的一塊渲染區(qū)域，并且有自己的一套屬于自己的渲染規(guī)則：
內(nèi)部的盒子會在垂直方向上一個接一個的放置。
對于同一個BFC的兩個相鄰的盒子的margin會發(fā)成重疊，與方向無關(guān)。
每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此。
BFC的區(qū)域不會與float的元素區(qū)域重疊
計算BFC的高度時，浮動子元素也參與計算。
BFC就是頁面的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素，反之，亦然。
BFC目的是形成一個相對于外界完全獨(dú)立的空間，讓內(nèi)部的子元素不會影響到外部的元素。

2、觸發(fā)元素
觸發(fā)BFC的條件包含但不限于：
根元素：即HTML元素
浮動元素：float值為left、right
overflow值不為visible，為auto，scroll，hidden
display的值為inline-block，inltable-cell，table-caption，table，inline-table，flex，inline-flex，grid、inline-grid
position的值為absolute或fixed

3、應(yīng)用場景
利用BFC的特性，我們將BFC應(yīng)用在以下場景
3.1、防止margin重疊（塌陷）


兩個p元素之間的距離為100px，發(fā)生了margin重疊（塌陷），以最大的為準(zhǔn)，如果第一個p的margin為80的話，兩個p之間的距離是100，以最大的為準(zhǔn)。
前面講到，同一個BFC的兩個相鄰的盒子的margin會發(fā)生重疊。
可以在p外面包裹一層容器，并觸發(fā)這個容器生成一個BFC，那么兩個p就不屬于同一個BFC，則不會出現(xiàn)margin重疊

這個時候，邊距則不會重疊

清楚內(nèi)部浮動：


而BFC在計算高度時，浮動元素也會參與，所以可以觸發(fā).par元素生成BFC，則內(nèi)部浮動元素計算高度時候也會計算。

實現(xiàn)效果如下：
自適應(yīng)多欄布局：

效果如下：

前面講到，每個元素的左外邊距與包含塊的左邊界相接觸。
因為，雖然.aslide為浮動元素，但是main的左邊依然會與包含塊的左邊相接觸。
而BFC的區(qū)域不會與浮動盒子重疊。
所以可以通過觸發(fā)main生成BFC，以此適應(yīng)兩欄布局。

這時候，新的BFC不會與浮動的.aside元素重疊，因此會根據(jù)包含塊的寬度，和.aside的寬度，自動變窄。效果如下：