介绍下 BFC、IFC、GFC 和 FFC

[LuckyWinty]

No description provided.

[LuckyWinty]

BFC（Block formatting contexts）：

块级格式上下文页面上的一个隔离的渲染区域，那么他是如何产生的呢？可以 触发 BFC 的元素有 float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC 有什么作用呢？比如说实现多栏布局

IFC（Inline formatting contexts）：

内联格式上下文 IFC 的 line box（线框）高度由其包含行内元素中最高的实际高 度计算而来（不受到竖直方向的 padding/margin 影响)IFC 中的 line box 一般左右 都贴紧整个 IFC，但是会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同 IFC 中时 不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块 与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排 列。那么 IFC 一般有什么用呢？水平居中：当一个块要在环境中水平居中时， 设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC（GrideLayout formatting contexts）：

网格布局格式化上下文当为一个元素设置 display 值为 grid 的时候，此元素将会 获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义 网格定义行（grid definition rows）和网格定义列（grid definition columns）属性 各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns） 为每一个网格项目（grid item）定义位置和空间。那么 GFC 有什么用呢，和 table 又有什么区别呢？首先同样是一个二维的表格，但 GridLayout 会有更加丰富的 属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC（Flex formatting contexts）:

自适应格式上下文 display 值为 flex 或者 inline-flex 的元素将会生成自适应容器 （flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端 也足够了，至少 safari 和 chrome 还是 OK 的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素， 而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元 素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内 的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如 何布局。