css3中的BFC,IFC,GFC和FFC

时间:2022-08-10 21:52:00
名称 英文全称 含义
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,其他行内元素则可以在此父元素下垂直居中。