關于BFC的相關，這里做一個比較詳細的總結
1、BFC的基本概念
BFC：直白點說就是滿足一定規則的一個塊級布局區域，這就是核心了，我們可以利用BFC的規則來很容易的達到某些布局需求，其實我們在布局中很可能已經默默用過BFC了，但是對BFC沒有一個比較清晰的認知，下面我就詳細的介紹一下
Box
Box 是 CSS 布局的對象和基本單位， 一個布局頁面就是各種各樣的Box組成的，不同類型的Box會有不同的渲染規則，下面是常用的box概念
- block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
- inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
Formatting context
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context（BFC）和 Inline formatting context （IFC）。
另外，CSS3中還增加了Grid（GFC）和Flex（FFC）
BFC詳細定義
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
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
2、BFC的應用
-
內部清除浮動，浮動會導致父級元素整體結構塌陷，我們通過構造BFC，可以達到清除浮動的功能，具體如下
這里需要給父元素加上overflow: auto屬性即可，構造成BFC后，浮動元素也會計算寬度
塌陷的父級元素：
塌陷的父級元素.png
構造BFC后的父級元素：
構造BFC后的結構.png -
解決margin重疊的問題
這里將兩個子元素放置在兩個不同的BFC中，才不會發生重疊，在同一個BFC下，會發生margin重疊，這個是BFC的布局規則
margin重疊的情況：
margin重疊的情況.png
構造BFC后的情況：
構造BFC后的margin情況.png -
解決自適應左右布局的問題
這里是采用的左右布局的一種方法，即左邊浮動，右邊構造BFC的方法，因為浮動元素會脫離文檔流，構造成BFC后，會計算浮動元素的寬度，另外一邊自然就能自適應了
左浮動，右邊未構造BFC，會導致右側在文檔流中從最左邊開始，我們說了float會導致元素脫離文檔流，如下圖：
左浮動右自適應布局未構造BFC.png
左浮動，右邊構造BFC，這是應用了 BFC的區域不會與float box重疊的特性：
左浮動右邊構造BFC效果.png
