css2.1定义了 BFC 块级格式化上下文 + IFC 行内格式化上下文。
css3新定义了 GFC网格布局格式化上下文 + FFC 自适应格式化上下文。
其实就是对于块级盒模型、行内盒模型的一些渲染规则的定义，决定了元素如何排列、相互影响等。
BFC规定：浮动元素与生成BFC的元素不互相覆盖，所以可以用来进行多列布局，如：左右两列分别左右浮动，中间的内容区自适应。
子元素浮动，父元素设置overflow：hidden的原理是：通过设置overflow：hidden，触发父元素生成BFC块（渲染规则规定：BFC块之间外边距不互相重叠），在计算高度时包含浮动子元素。
GFC：是针对那些display:grid的元素的渲染规则。
网格布局并没有flex布局应用的广泛，flex相对常用一些，但是用grid实现多行布局，更加好理解。
FFC：是针对display:flex的元素的渲染规则（流式布局，自适应伸缩）。
参考文章：
http://www.cnblogs.com/dingyufenglian/p/4845477.html
CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。
在解释BFC之前，先说一下文档流。我们常说的文档流其实分为 定位流 、 浮动流 、 普通流 三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。
BFC (Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。[MDN上的解释]：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
注意：一个BFC的范围包含创建该上下文元素的所有子元素，但 不包括 创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。
常规流(Normal flow)
浮动(Floats)
绝对定位(Absolute positioning)
注意： display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。
浏览器对BFC区域的约束规则：
规则解读：
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。
一个正常文档流的block元素可能被一个float元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position值等方式触发BFC，以阻止被浮动盒子覆盖。
[使用BFC阻止元素被浮动元素覆盖]点击预览
通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。
[使用BFC包含浮动元素]
注意，这里触发BFC并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。
BFC内部其他形式脱离文档流(absolute fixed) 点击预览
有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况，可以在最后一列触发BFC的形式来阻止换行的发生。比如下面栗子的特殊情况
使用BFC阻止多列布局最后一列换行 点击预览
属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。
这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。
使用BFC阻止margin合并 点击预览
但是这里有个 疑问 点击预览 ：
如果外面包一层div，设置能触发BFC的任何属性都能阻止相邻元素的margin合并。因为分属不同BFC不会发生margin合并。
而如果在外面不包一个div的话，当设置display为inline-block、inline-flex、table-captain，和position为absolute、fixed，float为left、right是可以阻止margin合并的。这里问题来了：
我们知道设置position和float会让元素脱离文档流并且又创建新的BFC，所以两个元素就不是相邻元素了，因此可以阻止相邻元素margin合并，但是inline-block、inline-flex、inline-grid、table-captain为什么可以呢？如果有人知道为什么，请告知~
FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。
IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。
