7.8 格式化上下文FC
格式化上下文Formatting Context，简称FC。FC是一个黑箱。例如CSS属性能直接看到样式效果，属于物理概念；FC并不是CSS属性，FC是CSS规范定义的抽象逻辑概念。浏览器源代码对各种FC有具体代码实现，不建议研究浏览器源码，所以学习CSS时把它当作一个黑箱。
黑箱FC学习方法。理解FC的相应概念与规范规则，通过页面效果间接验证。学习目的是建立整体知识体系，以及解决后续实际问题如margin折叠。
7.8.1 FC类型
CSS主要根据display-inside属性值制定相应的FC，主要包括5种类型的FC：
（1）BFC。Block Formatting Context，块级格式化上下文。对应display-inside: flow或flow-root且display-outside: block。
（2）IFC。Inline Formatting Context，行内格式化上下文。对应display-inside: flow且display-outside: inline。
流式布局对应BFC，BFC内部包含IFC，也称流式布局对应BFC与IFC。
（3）TFC。Table Formatting Context，表格格式化上下文。对应display-inside: table。
（4）FFC。Flex Formatting Context，弹性格式化上下文。对应display-inside: flex。
（5）GFC。Grid Formatting Context，grid 格式化上下文。对应display-inside: grid。
7.8.2 术语“FC模型”与“FC对象”
（1）FC模型
本教程的“BFC模型”就是指官方的“BFC”，其它FC模型同理，IFC模型指IFC、FFC模型指FFC。“FC（格式化上下文）”对初学者难以理解，因为这个术语是从底层实现角度进行命名。为方便初学者理解，给“FC（格式化上下文）”附加一个后缀，叫做“FC模型”，让同学们将注意力集中在模型而非上下文。“模型”这一叫法也完全符合FC的本质：FC内部包含一系列设计与规范规则，正如盒子模型与display模型，已经学习它的内部结构设计与规范规则以及相关CSS属性。
（2）FC对象
官方w3与MDN目前没有“FC对象”这一正式术语。因为CSS的个别规范规则需要判断元素是否在同一个FC，所以需要明确的在页面盒子内部标记出FC对象。所以本教程提出正式术语“FC对象”。FC对象在相应盒子的内部，在页面标记为虚线，命名示例：BFC-root、BFC-2、BFC-3、FFC-1、IFC-1等。
7.8.3 FC模型
学习每种FC模型，主要是学习它的设计（包括内部结构设计），满足设计的的规范规则，满足设计与规范规则的CSS属性。
（1）FC模型与内部的设计
每种类型FC模型包含相应的设计，例如： IFC模型内部结构包括行盒、strut，FFC设计各种对齐、换行、收缩。每个FC模型的本质是这些设计，包括内部结构的设计。
（2）FC模型与内部的规范规则
每种类型FC为内部元素制定相应的规范规则，例如：inline元素设置宽度无效在IFC里规定，block元素margin折叠在BFC里规定。规范规则与CSS属性同样是为了实现模型内部的设计。上述的2个示例都是“显得不正常”的特殊规范，其实每个FC里包含大量正常的规范，因为正常所以理所当然通常不去研究它们。
（3）CSS属性
看到盒子模型示意图，相应CSS属性与规范规则的学习变的简单，相应CSS属性的掌握是自然而然。同理，看到其它模型示意图并理解模型设计后，各条复杂的规范规则也显得自然而然、不需要硬记，更重要的是，CSS属性的合理使用也自然而然，否则CSS属性经常被乱用。
7.8.4 FC对象
每个FC对象负责管理内部的盒子，每个盒子属于上级FC对象管理。FC模型的设计与规范规则是在一个FC对象内部有效；一个页面包含多个FC对象，规范规则对不同FC对象的盒子则无效。下面示例先感受FC对象即可，后续章节相应详细讲解。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
.div2 {
display: flex;
}
.div2-1,.div2-2{
width: 250px;
}
</style>
</head>
<body>
<div class="div1">div1 小步教程 xiaobuteach.com</div>
<div class="div2">
<div class="div2-1">
<div class="div2-1-1">flex第1列</div>
<div class="div2-1-2">flex第1列 小步教程</div>
<div class="div2-1-2">flex第1列 xiaobuteach.com</div>
</div>
<div class="div2-2">flex第2列</div>
</div>
<div class="div3">div3</div>
</body>
</html>
FC对象示意图
该页面共4个FC对象。根元素html创建第1个BFC对象，记作BFC-root；display: flex的div2元素内部新建FFC，记作FFC-1；两个flex子元素的内部又分别新建BFC，记作BFC-2、BFC-3。div1、div2、div3由BFC-root对象管理，div2-1与div2-2由FFC-1管理，flex第1列内部各div由BFC-2对象，flex第2列内部内容由BFC-3管理。
本节介绍FC的创建、特点、部分作用，并尽量将它具象化。目前仍然没有给出FC的严格定义，后续也不会给出严格定义。
