關於BFC的觸發和特色？

BFC 定義

　　BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

　　BFC佈局規則：

1. 內部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算

    哪些元素會生成BFC:

1. 根元素
2. float屬性不爲none
3. position爲absolute或fixed
4. display爲inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不爲visible