BFC

在解釋BFC以前，先說一下文檔流。常說的文檔流分爲定位流、浮動流和普通流三種。而普通流其實就是BFC中的FC （formatting context）
直譯過來就是格式化上下文。它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其餘元素之間的關係和做用。
常見的FC有BFC和IFC

觸發條件
- 根元素
- float不爲none
- overflow不爲visible
- display的值爲inline-block、table-cell、table-caption
- position的值爲absolute或fixed

做用
BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。它和普通的塊級元素框有不一樣之處：

1. 能夠阻止元素被浮動元素覆蓋
2. 能夠包含浮動元素
3. 屬於同一BFC的兩個相鄰塊級子元素的上下margin會發生重疊，（設置writing-mode：tb-r時，水平margin會發生重疊）。因此兩個相鄰塊級子元素分屬於不一樣的BFC時能夠組織margin重疊