BFC, FFC, IFC, FFC

听说面试的时候要问到这个，特别是BFC，好惭愧，研究生读了快两年了，还不知道BFC。。。

1. BFC：(Block Formatting Contexts)，块级格式化上下文。

页面上一个渲染区域，容器内子元素不会对外面的元素产生影响。能够避免margin重叠。

产生方式：

float的值不为none；

overflow的值不为visible；

position的值不为relative和static；

display的值为table-cell, table-caption, inline-block中的任何一个。

用途：多栏布局

2. IFC：(Inline Formatting Contexts)，内联格式化上下文。

盒子依次水平放置，从包含块的顶部开始。对外表现为块级元素。

产生方式：

线框高有包含的行内元素中最高的实际高度计算而来。

用途：

1）水平居中：设置元素为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

2）垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

3. GFC：(GridLayout Formatting Contexts)，网络布局格式化上下文。

当一个元素设置为display:grid的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列，为每一个网格定义位置和空间。

4. FFC：(Flex Formatting Contexts)，自适应格式化上下文。

display值为flex或者inline-flex的元素将会生成自适应容器，当前只有谷歌和火狐支持该属性，不过在移动端几乎没有障碍(移动端是chrome和Safari的天下)。flex box由伸缩容器和伸缩子元素组成。通过设置元素display:flex/inline-flex可以得到伸缩容器，前者为块级元素，后者为行内元素。伸缩容器外元素不受影响。