BFC自適應布局
BFC(Block Formatting Context)塊級格式化上下文。它是一個獨立的渲染區域。
它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關系和相互關系。
塊級元素：父級（是一個塊元素）
內容：子元素（是一個塊元素）
其他元素：與內容同級別的兄弟元素
相互作用：BFC裏的元素與外面的元素不會發生影響
觸發條件或者說哪些元素會生成BFC：
滿足下列條件之一就可觸發BFC
【1】根元素，即HTML元素
【2】float的值不為none
【3】overflow的值不為visible
【4】display的值為inline-block、table-cell、table-caption
【5】position的值為absolute或fixed
BFC有哪些作用：
1.自適應兩欄布局
2.可以阻止元素被浮動元素覆蓋
3.可以包含浮動元素——清除內部浮動
通過改變高度塌陷的父盒子的屬性值，使其成為BFC，以此來包含子浮動盒子。
4.分屬於不同的BFC時可以阻止margin重疊
屬於同一個BFC的兩個相鄰塊級子元素的上下margin會發生重疊，所以當兩個相鄰塊級子元素分屬於不同的BFC時可以阻止margin重疊
操作方法：給其中一個div外面包一個div，然後通過觸發外面這個div的BFC，就可以阻止這兩個div的margin重疊
FBC布局與普通文檔流布局區別
普通文檔流布局規則
1.浮動的元素是不會被父級計算高度
2.非浮動元素會覆蓋浮動元素的位置
3.margin會傳遞給父級
4.兩個相鄰元素上下margin會重疊
BFC布局規則
1.浮動的元素會被父級計算高度（父級觸發了BFC）
2.非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發了BFC）
3.margin不會傳遞給父級（父級觸發了BFC）
4.兩個相鄰元素上下margin會重疊（給其中一個元素增加一個父級，然後讓他的父級觸發BFC）
BFC自適應布局