BFC、IFC、GFC、FFC

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更大