Normal Flow、Flow Layout及块、行内布局的概念区别与定义说明

你列出的5个术语并非同义概念，属于CSS默认布局体系下不同层级、不同指代范围的关联术语，其中仅flow layout和block-and-inline layout是规范明确的完全等价术语，其余概念有明确的范围差异，不能直接划等号。

• Normal Flow（常规流/普通流）：是CSS对元素默认排布行为的统称，指代元素没有被浮动、绝对/固定定位、Flex/Grid布局等特殊方案脱离默认规则时的所有排布逻辑。它不是某一个具体的布局算法，是一类默认排布行为的集合，覆盖流内块级排布、行内级排布、浮动排布、相对定位排布等所有非脱离默认流的行为。
• Flow Layout（流布局）：即block-and-inline layout（块内行内布局），是W3C规范定义的CSS最基础的默认布局算法模块，和Flex布局、Grid布局属于同一层级的正式布局分类，是实现Normal Flow核心排布逻辑的载体。
• Block Layout（块布局）：是流布局算法下的子规则集，专门负责块格式化上下文（BFC）内块级盒子的排布，核心规则包括块级元素默认宽度撑满包含块、垂直方向按书写顺序依次堆叠、垂直方向相邻margin发生合并等。
• Inline Layout（行内布局）：是流布局算法下的另一套子规则集，专门负责行内格式化上下文（IFC）内行内级盒子的排布，核心规则包括行内元素沿书写方向水平排列、超出容器宽度自动折行、对齐规则受line-height、vertical-align属性控制等。
• block-and-inline layout（块内行内布局）：是Flow Layout的规范全称，和Flow Layout完全等价，规范用这个命名明确该布局模块同时包含块、行内两套排布规则。

对应你查阅资料时遇到的困惑点，统一说明：

1. MDN提到的“采用块布局规则的文档最外层元素”是简化表述：根元素<html>本身是块级容器，首先触发块布局规则创建初始BFC，但它内部的元素会根据自身display属性分别适配块布局、行内布局规则，所有元素整体处于Normal Flow中，并非整个文档只运行块布局规则。
2. W3C CSS Display Level 3规范中flow layout（block-and-inline layout）的写法是正式的术语同义标注，代表两个名称在规范语境下完全通用，没有额外引申含义。
3. CSS2规范中仅描述不同盒子对应的格式化上下文行为，是因为该版本规范还没有把布局模块做独立的拆分命名，只从行为层定义了块级、行内级盒子的排布特征，没有明确上层模块和子规则的命名对应关系。

从覆盖范围从大到小排序，各概念的从属关系非常清晰：

1. 最外层：Normal Flow —— 所有默认流内排布行为的统称，除了流布局的块、行内核心规则外，还包含流内浮动、流内相对定位等补充排布规则
2. 核心算法层：Flow Layout = block-and-inline layout —— 支撑常规流核心排布的正式布局模块，是和Flex、Grid并列的CSS布局算法分类
3. 子规则层：Block Layout、Inline Layout —— 流布局模块下的两套具体执行规则，分别对应BFC、IFC内的盒子排布逻辑，是流布局的组成部分，不能单独指代整个默认布局体系。

内容的提问来源于stack exchange，提问作者Cristiano Moraes