css3中的BFC,IFC,GFC和FFC

• 出处：https://www.jianshu.com/p/e75f351e11f8

• 表格比较：

名称	英文全称	含义
BFC	Block Formatting Contexts	块级格式化上下文
IFC	Inline Formatting Contexts	内联格式化上下文
GFC	GridLayout Formatting Contexts	网格布局格式化上下文
FFC	Flex Formatting Contexts	自适应格式化上下文

• 如何产生BFC？
  float的值不为none。
  overflow的值不为visible。
  position的值不为relative和static。
  display的值为table-cell, table-caption, inline-block中的任何一个。

• IFC一般有什么用呢？
  水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
  垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。