看了网上很多文章，只想说一句：“我真的什么都不懂”。以下是我个人的理解，如果有不对的地方，我可以指出。在描述它们的区别之前，我们首先要了解什么是BFC、IFC、GFC、FFC？我们知道元素包括行内元素、块级元素和行内块级元素。它们在页面上呈现时的定位和排列是不同的，因为它们根据内部格式化上下文呈现不同，即BFC和IFC。后来CSS3加入了grid布局和flex布局，于是也迎来了GFC和FFC的分界线--------------------------------------------------------------------以下内容是在网上找的，基本上类似于BFC（Blockformattingcontexts）：块级格式化上下文页面上的一个隔离渲染区域，那么它是如何生成的呢？可以触发BFC的元素有float,position,overflow,display:table-cell/inline-block/table-caption；BFC是做什么的？例如，实现多列布局IFC（Inlineformattingcontexts）：内联格式化上下文IFC的行框（线框）的高度是根据行中包含的元素的最高实际高度计算的（不受padding/marginintheverticaldirection)IFC中的linebox一般会左右紧贴整个IFC，但是会被float元素干扰。浮动元素将放置在IFC和线框之间，使线框宽度更短。同一个ifc下多个lineboxes的高度会不一样。IFC中不可能有块级元素。在插入块级元素时（比如在p中插入div），会生成两个匿名块与div分开，即两个IFC，对外表示为一个块级元素，与div垂直排列。那么IFC一般有什么用呢？水平居中：当一个block要在环境中水平居中时，设置为inline-block会在外层生成IFC，text-align可以使其水平居中。垂直居中：创建一个IFC，使用其中一个元素展开父元素的高度，然后设置其vertical-align:middle，其他内联元素可以在这个父元素下垂直居中GFC（GrideLayoutformattingcontexts）：gridlayoutformat当一个元素的display值为grid时，该元素会得到一个独立的渲染区域。我们可以在网格容器上定义网格定义行和网格。网格定义列属性定义每个网格项上的网格行和网格列，并定义每个网格项的位置和空间。那么GFC有什么用，它和table有什么区别呢？首先，它也是一个二维表，但是GridLayout会有更丰富的属性来控制行列，控制对齐方式，以及更精细的渲染语义和控制FFC（Flexformattingcontexts）：自适应格式上下文显示值为flex或inline-flex的元素会生成一个自适应容器（flexcontainer）。不幸的是，这个令人敬畏的属性只有谷歌和火狐支持，但在移动端已经足够了。至少safari和chrome还是可以的。毕竟移动端也就这两个了。仁慈。一个弹性盒子由一个弹性容器和一个弹性项目组成。可以通过将元素的显示属性设置为flex或inline-flex来获得弹性容器。设置为flex的容器呈现为块级元素，而设置为inline-flex的容器呈现为内联元素。弹性容器中的每个子元素都是一个弹性项目。可以有任意数量的弹性项目。弹性容器外部和弹性项目内部的所有内容均不受影响。简单来说，Flexbox定义了如何在灵活的容器中布局灵活的项目。文章内容/灵感借鉴自以下内容【持续维护/更新500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【使用THREE.JS实现3D城市建模（珠海市）】https://3d.noxussj.top/
