BFC簡析

1、BOX模型

box是CSS中佈局的基本單位，而不一樣類型的box，會參與不一樣的Formatting Context（一個決定如何渲染文檔的容器），box內的元素會以不一樣的方式渲染。

block-level：display屬性爲blcok、table、list-item，會生成block-level box，並參與Block Formatting Context。

inline-level：display屬性爲inline、inline-block，inline-table，會生成inline-level box，並參與Inline Formatting Context。

 

2、Formatting Context

Formatting Context是頁面中的一塊渲染區域，並有一套渲染規則，決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。

常見的Formatting Context：

1.Block Formatting Context ：BFC 塊級格式化上下文

2.Inline Formatting Context ：IFC

 

3、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。