共计 1746 个字符，预计需要花费 5 分钟才能阅读完成。
网上看了很多文章，只想说一句话：“真的啥都没看懂”。以下是我集体的了解，有不对的中央能够提出。
在形容他们之间的区别之前，咱们首先要理解一下什么是 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 定义了伸缩容器内伸缩我的项目该如何布局
附加
- 此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨
- 【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
- 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/
