FC（FormattingContext）是指页面中的一个渲染区域，有一套渲染规则，决定了它的子元素如何定位，以及它们与其他元素。常见的FC有BFC、IFC、GFC和FFC。BFCBFC（blockformattingcontext）直译为“块格式化上下文”。block-块级框参与块格式化上下文context-这里的上下文指的是一个流：普通文档流，float，position是一个独立的渲染区域。它规定了内部Block-levelBox如何布局，与该区域外部无关。触发条件根元素或包含它的东西-根元素或包含它的其他元素浮动（浮动不为无的元素）-浮动元素（浮动不为无的元素）绝对定位元素（位置为绝对或固定的元素)-绝对定位元素（元素的位置是绝对的或固定的）inline-blocks（元素显示：inline-block）-行内块（元素显示：inline-block）tablecells（元素显示：table-cell，这是HTML表格单元格的默认值）-表格单元格（带有显示的元素：table-cell，HTML表格单元格默认属性）表格标题（带有显示的元素：table-caption，这是HTML表格标题的默认值）-表格title(元素有display:table-caption,HTMLtabletitledefaultattribute)由有display:table,table-row,table-row-group,table-header-group,table-footer-group的元素隐式创建的匿名表格单元格（这是第edefaultforHTMLtables,tablerows,tablebodys,tableheadersandtablefooters,respectively),orinline-table-anonymoustableelements,intheelementdisplay:table,table-row,table-row-group,table-header-group、table-footer-group（分别为默认的HTML表格、表格行、表格、表格头部和表格底部），在inline-table时创建溢出值不可见的块元素——withoverflowandthe值不可见的块元素display:flow-rootelementswithcontain:layout,content,orstrict-元素有一个contains属性，其值为layout,content,orstrictflex项目（具有display:flex或strict的元素的直接子元素inline-flex)-flexitems(display:flexorinline-flexelementdirectchildelements)griditems(directchildrenoftheelementwithdisplay:gridorinline-grid)-griditems(display:gridorinline-grid)多列容器（列数或列宽不是自动的元素，包括列数为1的元素）-multicol容器（元素的列数或列宽不是自动的，包括列数设置为1的元素）column-span:all应该总是创建一个新的格式context,-即使column-span:all元素不包含在multicol容器中-column-span:all总是创建一个新的格式化上下文，即使column-span:所有元素都没有包含在多列容器中从2018.1.9开始，查看最新的触发条件MDNLinkConstraintRules在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直放置。两个兄弟框之间的垂直距离取决于margin属性。同一块格式化上下文中相邻块级框的垂直边距将折叠。每个盒子的左外边缘靠近包含块的左边缘（在从右到左的格式中，盒子的右外边缘靠近包含块的右边缘），同样是trueforfloatingBFC是一个隔离独立于页面的容器，容器里面的子元素不会影响外面的元素。容器外的元素不会影响容器内的子元素。在计算BFC的高度时，浮动元素也参与了IFCGFC、FFCGFC的计算，FFC是CSS3中提出的规范，后面会总结flex和grid的结果。
