第 20 题：请描述一下 BFCIFCGFC 和 FFC 的区别？

Posted 2021-08-13 Noxus丶SJ

网上看了很多文章，只想说一句话：“真的啥都没看懂”。以下是我个人的理解，有不对的地方可以提出。

在描述他们之间的区别之前，我们首先要了解一下什么是 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 定义了伸缩容器内伸缩项目该如何布局

文章的内容/灵感都从下方内容中借鉴

• 【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues

• 【大数据可视化图表插件】https://www.npmjs.com/package/ns-echarts

• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/