8.2 流式布局的组成

流式布局模型由3个子模型组成：BFC模型、IFC模型、定位模型。本章具体介绍BFC模型，下章讲解IFC模型，第11章讲解定位模型。

8.2.1 子模型简介

1、BFC模型

BFC模型内部只有并列或嵌套的块级元素，它们由BFC对象进行管理。

BFC模型示意图

div0创建BFC对象，记作BFC-1，除div0的所有div均由BFC-1管理。BFC-1属于抽象对象，标记绿色虚线，颜色与创建元素一致。

2、IFC模型

IFC模型内部只有行内级元素，它们由IFC对象进行管理。

IFC模型示意图

块容器div1内部新建IFC对象，记作IFC-1，span1~5属于IFC-1；块容器div3内部新建IFC对象，记作IFC-2，span6~7属于IFC-2。行内元素总在块容器内部，所以IFC模型在总在BFC模型的内部。

3、定位模型

流式布局内既包含自动定位的元素，也可以包含手动指定位置（absolute、fixed、float）的元素。自动定位与手动定位统称为定位模型。

定位模型示意图

绿色元素属于自动定位，桔色元素属于手动定位。BFC同时负责管理自动定位与手动定位的元素，所以BFC模型内部包含定位模型。

因为在不同场合需要从不同角度理解BFC与流式布局这两个术语，所以建立下面可能看似别扭的等式关系。

（1）流式布局包含BFC。两者关系等式如下。

流式布局 = BFC + IFC + 定位模型

从页面设计的角度，通过此关系等式理解它们。

（2）BFC就是流式布局。两者关系等式如下。

（广义）BFC = 流式布局

BFC内部包含IFC与定位模型，所以两者关系简写如上。这里的BFC相当于广义BFC。说到BFC时，有可能指BFC本身，有可能指广义BFC，后续基本不使用广义BFC这一表述。此等式帮助理解“新建BFC”与“参与到BFC”等术语的内涵。

示例。MDN描述“flow表示元素参与到已有BFC或新建BFC，flow-root表示新建BFC”的理解。这里直接把BFC理解成流式布局对象，“新建BFC”表示新建一个流式布局对象，例如BFC-2，它内部的元素由BFC-2管理。“参与到BFC”表示元素由原有流式布局对象管理。

（1）本教程的“流式布局”对应w3的Visual formatting model的完整内容。

流式布局（广义BFC模型）
= BFC模型 + IFC模型 + 定位模型
= Visual formatting model(w3) 
= 视觉格式化可视化模型(MDN中文版)

（2）本教程的“流式布局”不是对应Visual formatting model里的定位方案的“normal flow”（正常流定位方案）。

（3）“盒子”与“元素”的穿插使用。本教程会大量使用“盒子”替代“元素”这种表达，则是侧重表达渲染过程，其中会穿插使用“元素”则是要说明元素结构。