如何使用BFC清除CSS浮動以及解決margin合併的問題

一、CSS 最基本的佈局單位

Box 是 CSS 佈局的對象和基本單位。
元素的類型和display的屬性決定了Box的類型。

二、BFC

BFC（Box Formatting Context）是一個獨立的渲染區域，規定內部的元素如何佈局，而且與外部的元素無關。
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套本身的渲染規則，規定了內部子元素如何定位，以及與其餘元素的關係和相互做用。

三、BFC的佈局規則

內部的Box會在垂直方向上一個接着一個放置。
Box垂直方向的距離由 margin 決定。屬於同一個BFC中的兩個相鄰的Box上下margin會發生疊加。
每一個元素的margin box 的左邊，與包含塊border box 的左邊相接觸。即便浮動也是如此。
BFC 的區域不會與float box 重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響外面的元素，反之也如此。
計算BFC的高度時，浮動元素也參與計算。

四、哪些元素會生成BFC？

根元素；
float 屬性不爲 none；

position 爲 absolute 或 fixed；

display 爲 inline-block，table-cell，table-caption，flex，inline-flex；

overflow 不爲 visible；　

五、BFC的做用及原理

　　自適應兩欄佈局：左邊定寬高，右邊自適應。
　　　　左側浮動，而後左右重疊，根據BFC的規則第3、四條，設置右側的元素爲BFC。

　　清除內部浮動：
　　　　一個元素裏面，有兩個浮動的元素，父元素的高度默認是不計算浮動元素的高度。
　　　　解決方案，根據BFC規則第六條。

　　防止垂直margin疊加：
　　　　BFC內部相鄰的元素的margin會疊加。
　　　　根據BFC規則第五條，將其中一個設置爲BFC便可。

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。