BFC簡析，

BFC簡析，
一、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。 二、Formatting ContextFormatting Context是頁面中的一塊渲染地區，並有一套渲染規則，決定了其子項目將如何定位，以及和其他元素的關係和相互作用。常見的Formatting Context：1.Block Formatting Context ：BFC 塊級格式化上下文2.Inline Formatting Context ：IFC 三、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。