BFC 是什么？
首先BFC(Block Formatting Contexts)中文是塊級格式化上下文。BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。并且，在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
BFC的布局規則：
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的垂直方向的margin會重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算
如何生成 BFC？
滿足下面條件的任何一點，都會生成BFC
- 根元素（整個頁面就是一個大的BFC）；
- float屬性不為none；
- position為absolute或fixed；
- display為inline-block, flex, 或者inline-flex；
- overflow不為visible；
BFC 有什么作用？
1.左右兩欄布局
image.png
讓右邊的div生成BFC就可以實現兩欄布局
2.清理內部浮動
image.png
讓父元素形成BFC，BFC也會計算其內部浮動子元素的高度。
3.防止margin重疊：
image.png
同一個BFC中的相鄰Box垂直方向的margin會重疊，故要解決margin重疊問題，只需要讓兩個p元素處于不同的BFC就ok了。第一個p元素屬于根元素BFC中，第二個p元素被div包裹屬于新的BFC中。
