1、CSS 最基本的佈局單位
Box 是 CSS 佈局的物件和基本單位。
元素的型別和display的屬性決定了Box的型別。
2、BFC
BFC（Box Formatting Context）是一個獨立的渲染區域，規定內部的元素如何佈局，並且與外部的元素無關。
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套自己的渲染規則，規定了內部子元素如何定位，以及與其他元素的關係和相互作用。
3、BFC的佈局規則
內部的Box會在垂直方向上一個接著一個放置。
Box垂直方向的距離由 margin 決定。屬於同一個BFC中的兩個相鄰的Box上下margin會發生疊加。
每個元素的margin box 的左邊，與包含塊border box 的左邊相接觸。即使浮動也是如此。
BFC 的區域不會與float box 重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響外面的元素，反之也如此。
計算BFC的高度時，浮動元素也參與計算。
4、哪些元素會生成BFC？
根元素；
float 屬性不為 none；
position 為 absolute 或 fixed；
display 為 inline-block，table-cell，table-caption，flex，inline-flex；
overflow 不為 visible；
5、BFC的作用及原理
自適應兩欄佈局：左邊定寬高，右邊自適應。
左側浮動，然後左右重疊，根據BFC的規則第三、四條，設定右側的元素為BFC。
清除內部浮動：
一個元素裡面，有兩個浮動的元素，父元素的高度預設是不計算浮動元素的高度。
解決方案，根據BFC規則第六條。
防止垂直margin疊加：
BFC內部相鄰的元素的margin會疊加。
根據BFC規則第五條，將其中一個設定為BFC即可。
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。