1、什么是BFC？
BFC 全稱為 “塊 格式化 上下文” (Block Formatting Context)
1、如何生成BFC？
(1) float:left或right
(2) 根元素Html
(3) overflow:hidden,auto,scoll
(4) display:inline-block;
(5) position:fixed,absolute
2、BFC規則
(1) 垂直方向上的距離由margin決定，屬於同一個BFC的兩個相鄰的標簽的margin會發生重疊
<style> .box{ width: 300px; height: 300px; float: left; border: 5px solid red;
} .top{ width: 100px; height: 100px; margin-bottom:10px ; border:5px solid gray;
} .bottom{ width: 100px; height: 100px; margin-top:40px ; border:5px solid blue;
}
</style>
<body>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
top盒子與bottom盒子垂直間距40px(並沒有把margin-top margin-bottom疊加起來 而是取了較大的一個值，因為他們發生了重疊)
(2) 每個標簽的左外邊距與包含塊的左外邊界相接觸（從左向右），即使浮動標簽也是如此。
這個理解就比較簡單了，任何一個標簽在你沒有設置margin，padding，position,等改變其位置的屬性是，他默認放在最左邊，后面的一個接一個
(3) BFC的區域不會與浮動的標簽區域重疊
a左浮動了b也左浮動了，a與b不會重疊，只會一個接一個的放置
(4) 計算BFC高度的時候，浮動子元素也參與計算
說一個很簡單的例子，我們知道清除浮動的方法有很多，其中一種就是給父元素也設置浮動，父元素就有高度了，其原因就在這（BFC高度的時候，浮動子元素也參與計算）也就是父元素是一個BFC，在算父元素的高度時，浮動的子元素也參與計算，從而父元素就會被子元素撐開
(5) BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響外面的標簽，反之亦然
3、BFC能解決什么問題？（與上面的規則對應）
(1) 外邊距重疊
(2) 自適應兩欄或三欄布局
(3) 防止字體環繞
(4) 清除浮動