css佈局中的各種FC(BFC、IFC、GFC、FFC)
阿新 • • 發佈:2018-12-20
什麼是FC?
FC(Formatting Context)格式化上下文,其實指的是一個渲染區域,擁有一套渲染規則,它決定了其子元素如何定位,以及與其他元素之間的關係和相互作用。
什麼是BFC?
BFC(Block Formatting Context)塊級格式化上下文,指的是一個獨立的塊級渲染區域,擁有一套獨立的渲染規則,該區域擁有一套渲染規則來約束塊級盒子的佈局,且與區域外部無關。
BFC的約束規則:
1、內部的BOX會在垂直方向一個接一個的排列著;
2、屬於同一個BFC的兩個相鄰BOX的margin會發生重疊;
3、每個元素的左邊距與包含塊的左邊相接觸,即使浮動元素也是如此(position: absolute會超出包含塊的邊界);
4、BFC區域不會和float區域重疊;
5、計算BFC的時候,浮動子元素的高度也會計算在內;
6、BFC是一個獨立的渲染區域,其容器內的元素不會影響到容器外的元素,反之亦然;
怎麼生成BFC:
1、float不為none;
2、overflow不為visible;
3、display的值為: inline-block, table-cell, table-caption;
4、position的值為absolute, fixed;
BFC應用:
1、防止margin重疊;
2、防止發生因浮動而產生的高度塌陷問題;
3、可以用於兩欄佈局;
什麼是IFC?