什么是FC？FormattingContext，格式化上下文，是指页面中的一个渲染区域，它有一套渲染规则，决定了它的子元素如何定位，以及它们与其他元素的交互和效果。BFC什么是BFCBlockFormattingContext，块级格式化上下文，一个独立的块级渲染区域，它有一套渲染规则来约束块级框的布局，与区域外部无关。BFC的约束规则里面的BOX会在垂直方向一个一个的放置；垂直方向的距离由边距决定。（完整的说法是：属于同一个BFC的两个相邻BOX的边距会重叠，不管方向如何。）每个元素的左外边距触及包含块的左边界（从左到右），这是即使对于浮动元素也是如此。（这意味着BFC中的子元素不会超出其包含块，位置为绝对的元素可以超出其包含块的边界）；BFC区域不会与浮动元素区域重叠；在计算BFC的高度时，float子元素也参与计算；BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外面的元素，反之亦然；BFC的应用防止边距重叠，防止浮动引起的高度塌陷。生成的BFCfloat的值不是none；overflow的值是不可见的；display的值为inline-blocktable-celltable-caption；position的值是绝对的或固定的；display:table也觉得BFC可以生成？事实上，Table默认会生成一个匿名table-cell，而正是这个匿名table-cell产生了BFC。IFCWhatisIFCIFC(InlineFormattingContexts)直译为“行内格式化上下文”，IFC的行框（wireframe）的高度是根据行中包含的元素的最高实际高度来计算的（不受verticalpadding/margin的影响）)国际金融公司的一些特点。IFC中的linebox一般会紧贴整个IFC，但是会被float元素干扰。浮动元素将位于IFC和线盒之间，使线盒的宽度更短。IFC中不可能有块级元素。当插入一个块级元素时（比如在p中插入一个div），会生成两个匿名块来分隔div，即会生成两个IFC，每个IFC对外表现为一个块级。元素，与div垂直对齐。IFC水平居中的应用：当一个block要在环境中水平居中时，设置为inline-block会在外层生成IFC，text-align可以使其水平居中。垂直居中：创建一个IFC，使用其中一个元素展开父元素的高度，然后设置它的vertical-align:middle，其他内联元素就可以在这个父元素下垂直居中了。GFCGFC（GridLayoutFormattingContexts）直译为“网格布局格式化上下文”。当将元素的显示值设置为grid时，该元素将获得一个独立的渲染区域。我们可以使用它在网格容器（gridcontainer）上定义网格定义行和网格定义列属性，并将网格行和网格列定义为每个网格项（griditem）定义的位置和空间。GFC会改变传统的布局方式，他会把布局从一维布局变成二维布局。简单的说，有了GFC，布局不再局限于单一维度。这时，你就很容易实现九宫格、拼图等布局效果。FFCFFC（FlexFormattingContexts）直译为“自适应格式化上下文”。显示值为flex或inline-flex的元素将生成自适应容器（flexcontainer）。一个弹性盒子由一个弹性容器和一个弹性项目组成。可以通过将元素的显示属性设置为flex或inline-flex来获得弹性容器。设置为flex的容器呈现为块级元素，而设置为inline-flex的容器呈现为内联元素。弹性容器中的每个子元素都是一个弹性项目。可以有任意数量的弹性项目。弹性容器外部和弹性项目内部的所有内容均不受影响。简单地说，Flexbox定义了弹性容器内的弹性项目应该如何布局。FFC和BFC的区别FFC和BFC有点类似，但是还是有以下区别：Flexbox不支持::first-line和::first-letter这两个伪元素。垂直对齐不适用于Flexbox中的子元素。effect的float和clear属性对Flexbox中的子元素没有影响，不会让子元素脱离文档流（但对Flexbox有影响！）多列布局（column-*）也是invalidinFlexbox，这意味着我们不能使用多列布局来排列Flexbox下的子元素。Flexbox下的子元素不会继承父容器的宽度
