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