BFC IFC GFC FFC的理解

FC：formatting context 格式化上下文。
css2.1定义了 BFC 块级格式化上下文 + IFC 行内格式化上下文。
css3新定义了 GFC网格布局格式化上下文 + FFC 自适应格式化上下文。

其实就是对于块级盒模型、行内盒模型的一些渲染规则的定义，决定了元素如何排列、相互影响等。

BFC规定：浮动元素与生成BFC的元素不互相覆盖，所以可以用来进行多列布局，如：左右两列分别左右浮动，中间的内容区自适应。
子元素浮动，父元素设置overflow：hidden的原理是：通过设置overflow：hidden，触发父元素生成BFC块（渲染规则规定：BFC块之间外边距不互相重叠），在计算高度时包含浮动子元素。

GFC：是针对那些display:grid的元素的渲染规则。
网格布局并没有flex布局应用的广泛，flex相对常用一些，但是用grid实现多行布局，更加好理解。

.parent { display: grid;grid-columns: 100px 200px 1fr;grid-rows:50px 200px 1fr;}//定义网格的行数、列数
.cell {grid-column:2;grid-row: 1;}//定义单元格的位置
//或者通过单元格命名的方式，此处不详述

FFC：是针对display:flex的元素的渲染规则（流式布局，自适应伸缩）。

.parent{display:flex;flex-direction:row || column;align-items:flex-start || flex-end || center || strech || baseline;justify-content: flex-start || flex-end || center || space-around || space-between;align-self: auto};//定义布局方向、对齐方式等
.cell {flex:1;}//定义自身占比

参考文章：
http://www.cnblogs.com/dingyufenglian/p/4845477.html