css布局中的各种FC（BFC、IFC、GFC、FFC）
css布局中的各种FC（BFC、IFC、GFC、FFC）
什么是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?
版权声明：本文为sunshinexiu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。