Fc:页面中的一块渲染区域,有着自己的一套渲染规则,就跟中国地图一样,每一个省都有自己的规则。
BFC:
块级格式化上下文,一个隔离的渲染区域,区域内的子元素在布局上不会影响到外面的元素。
如何产生BFC?
body根元素:body区域就是一个最大的BFC
Float值不为none;
Display值为table-cell, inline-block, table-caption
Overflow值不为visible(auto,hidden,scroll划分了一个区域)
Position值为absolute(脱离文档流,脱离的这部分就是BFC的一套渲染规则), fixed
BFC有什么用?
在多栏布局中,块级元素浮动,里面的元素是在一个相对独立隔离的区域内运行。
BFC特性及应用:
1、同一个BFC下外边距会发生重叠
body就是最大的BFC区域, 第一个盒子与第二个盒子外边距发生重叠
如何避免这种情况,将两个盒子放置在两个不同的BFC区域下,
将两个p盒子放置在两个div下,再将两个div产生BFC
2、高度塌陷问题
我们都知道浮动的元素会脱离文档流,如果父盒子没有给高度,子元素又刚好浮动了,父元素里面就没有内容撑起高度,会造成父元素高度为0。
怎么解决这个问题呢?我们只需要给父盒子触发BFC就好了,例如给父盒子添加overflow: hidden;
3、解决元素被浮动元素覆盖的问题
例如黄色盒子浮动之后脱离文档流,粉色盒子(非浮动)自动往左挪,但是浮动盒子会覆盖在没有浮动盒子的上方,并且没有浮动盒子的内容环绕在浮动盒子周围,我们想让浮动盒子不覆盖非浮动盒子就得触发BFC.
我们可以在第二个非浮动盒子触发BFC,例如加上overflow: hidden
IFC:
内联格式化上下文,文本类的渲染规则,IFC高度由其包含的最高的行内元素的实际高度来决定
建立条件:块容器里面只有内联元素
在一个IFC里面,行内盒子是一个接一个从顶部水平放置,这些行内盒子之间的margin、padding、border水平方向上都生效。
当一行装不下时,会折行,垂直方向紧紧堆叠,不会重叠。
IFC内元素浮动之后,浮动的元素参与line-box高度计算,并且该浮动元素换行之后开始排列
FFC:
自适应格式化上下文,display值为flex或者inline-flex的元素胡自动生成自适应容器。设置为flex的容器会被渲染成一个块级元素,而设置为inline-flex的元素会被渲染成一个行内元素,容器外的元素和容器内的子元素不受影响。
GFC:
网格格式化上下文,display:gird产生,与flex相似,flex元素相对于轴线布局,gird里面可以放多个项目,是一个二维的表格,产生行和列,每个元素指定在“单元格”,比flex更大