一、什么是FC？
FC，Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了子元素将如何定位，以及和其他元素的关系和相互作用。
二、BFC
BFC，Block Formatting Contexts，块级格式化上下文。BFC是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。
1、触发BFC的条件
A、浮动元素，float除none以外的值； B、绝对定位元素，position值为二者absolute，fixed之一； C、display值为三者inline-blocks，table-cells，table-captions之一； D、overflow值为三者hidden，auto，scroll之一。
2、BFC的特性
A、BFC可以阻止外边距折叠； B、BFC可以包含浮动的元素； C、BFC可以阻止元素被浮动元素覆盖； D、BFC尽可能让元素不在一行，内部元素都是块级元素，包含div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p。
3、BFC的用途
比如常见的多栏布局，结合块级别元素浮动，内部元素不受外部环境影响。
三、IFC
IFC，Inline Formatting Contexts，内联格式化上下文。IFC的line box高度由行内子元素中最大的实际高度确定，不受竖直方向的padding/margin影响。IFC中不可能有块级元素，如果插入了块级元素（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
1、触发IFC的条件
A、display值为inline-blocks，inline； B、设置font-size； C、设置line-height，行高是指上下文本行的基线间的垂直距离； D、设置height； E、设置vertical-aligin。
2、IFC的特性
让元素尽可能在同一行，内部元素都是内联元素，包含a b span I b em img input select strong。
3、IFC的用途
比如水平居中，设置text-align:center，垂直居中设置其vertical-align:middle。
三、FFC
FFC，Flex Formatting Contexts，自适应格式化上下文，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。
1、触发FFC的条件
display值为flex。
2、FFC的特性
声明了一个弹性伸缩盒子。
3、FFC的用途
响应式布局。
四、GFC
GFC，GridLayout Formatting Contexts，网格布局格式化上下文，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。