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