BFC、IFC、GFC 和 FFC 的区别？

Love The Way You Lie 2022-09-05 15:58 246阅读 0赞

![67b1d39882e061bb3dfccdf1722fda8c.png][]

在描述他们之间的区别之前，我们首先要了解一下什么是 BFC、IFC、GFC、FFC？

我们知道元素有内联元素、块级元素、行内块级元素，在页面上渲染时它们的定位，排列方式等都有所不同，就是因为它们根据内部的格式化上下文进行不同的渲染，即 BFC 和 IFC。

后面 css3 新增了 grid 布局以及 flex 布局，所以也迎来了 GFC、FFC。

### **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 定义了伸缩容器内伸缩项目该如何布局。

感谢阅读。

#  #

**学习更多技能**

**请点击下方公众号**

![0e58832a3c262ea6110bc66b35b1f57f.gif][]

![aa5aa52f7eac3c6ea8aa23ed90cb349c.png][]

![5c034ea2b0d5dde21eab62f5f5fb313a.png][]

[67b1d39882e061bb3dfccdf1722fda8c.png]: /images/20220829/90d27f6b16ba49a59847bba971eb704d.png
[0e58832a3c262ea6110bc66b35b1f57f.gif]: /images/20220829/8f88f2572ac94e1c8608efe96e4e32fb.png
[aa5aa52f7eac3c6ea8aa23ed90cb349c.png]: /images/20220829/db9b42a0b33d487a8f4d444697f069b2.png
[5c034ea2b0d5dde21eab62f5f5fb313a.png]: /images/20220829/b1a0216438394d2e84c0406d016c5d31.png