在了解BFC之前，先了解兩個概念：
1.box就是盒模型。box是css布局的對象和基本單位，說白了就是咱們網頁布局的基石，簡單來說一個頁面是由很多box（盒模型）組成的。
2.元素的類型也就是display屬性。元素的類型和display屬性決定了這個 Box的類型。不同類型的Box，會參與不同的Formatting Context（一個決定如何渲染文檔的容器-簡單來說就是網頁布局的一個范圍），因此Box內的元素會以不同的方式渲染（顯示）。
概念：BFC全稱Block Formatting Context ，中文直譯為塊級格式上下文。它是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。是一種布局方式。
通俗的來說：BFC是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不着的），箱子內部的元素無論如何翻江倒海，都不會影響到外部。轉換為BFC的理解則是：BFC中的元素的布局是
不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。比如清除浮動）並且在一個BFC中，塊元素與行元素都會垂直的沿着其父元素的邊框排列。
BFC布局規則
1.在BFC下，內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器（父元素）的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此。
4.BFC的區域不會與float box重疊。例子：兩個div，一個進行浮動，一個不浮動，這時浮動的元素會覆蓋沒有浮動的元素。給沒有浮動的元素加overflow：hidden。就不會重合。
5.計算BFC的高度時，浮動元素也參與計算
如何觸發 BFC
1.浮動元素，float 除 none 以外的值
2.position的值不為static或者relative
3.display不為none
4.overflow 除了 visible 以外的值
BFC的應用
1.解決浮動塌陷問題
2.自適應兩欄布局（我們還可以運用BFC可以阻止元素被浮動元素覆蓋的特性來實現自適應兩欄布局。方法：給沒有浮動的元素加overflow：hidden。）
3.解決設置margin值重疊問題。(設置)
總結：BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。它規定了元素與其他元素的關系和相互作用。