BFC、IFC、FFC、GFC介绍

什么是BFC、IFC、FFC、GFC

Block Format Context、Inline Format Context、Flex Format Context、Grid Format Context

 

BFC 是块级格式化上下文,盒子里面的元素不会影响到外面的元素.

如何产生BFC：

• float的值不为none.
• overflow的值不为visible.
• position的值为absolute、fixed.
• display的值为table-cell, table-caption, inline-block中的任何一个.

用处：自适应多栏布局,防止margin重叠、清除内部浮动；

 

IFC 是内联格式化上下文,它的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响).

水平居中：当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中.

垂直居中：创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中.

 

FFC 是自适应格式化上下文,display值为flex或者inline-flex的元素将会生成自适应容器,目前好像只有谷歌和火狐支持.

Flex Box 由伸缩容器和伸缩项目组成.通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器.设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素.

 

GFC 是网格布局格式化上下文,当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器上定义网格定义行和网格定义列属性各在网格项目上定义网格行和网格列为每一个网格项目定义位置和空间.