FC:formatting context 格式化上下文。
css2.1定義了 BFC 塊級格式化上下文 + IFC 行內格式化上下文。
css3新定義了 GFC網格布局格式化上下文 + FFC 自適應格式化上下文。
其實就是對于塊級盒模型、行內盒模型的一些渲染規(guī)則的定義,決定了元素如何排列、相互影響等。
BFC規(guī)定:浮動元素與生成BFC的元素不互相覆蓋,所以可以用來進行多列布局,如:左右兩列分別左右浮動,中間的內容區(qū)自適應。
子元素浮動,父元素設置overflow:hidden的原理是:通過設置overflow:hidden,觸發(fā)父元素生成BFC塊(渲染規(guī)則規(guī)定:BFC塊之間外邊距不互相重疊),在計算高度時包含浮動子元素。
GFC:是針對那些display:grid的元素的渲染規(guī)則。
網格布局并沒有flex布局應用的廣泛,flex相對常用一些,但是用grid實現(xiàn)多行布局,更加好理解。
.parent { display: grid;grid-columns: 100px 200px 1fr;grid-rows:50px 200px 1fr;}//定義網格的行數(shù)、列數(shù)
.cell {grid-column:2;grid-row: 1;}//定義單元格的位置
//或者通過單元格命名的方式,此處不詳述
FFC:是針對display:flex的元素的渲染規(guī)則(流式布局,自適應伸縮)。
.parent{display:flex;flex-direction:row || column;align-items:flex-start || flex-end || center || strech || baseline;justify-content: flex-start || flex-end || center || space-around || space-between;align-self: auto};//定義布局方向、對齊方式等
.cell {flex:1;}//定義自身占比