| 名称 | 英文全称 | 含义 |
|---|---|---|
| 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，其他行内元素则可以在此父元素下垂直居中。