Normal Flow与BFC的关系是什么？我的理解模型是否正确？

引用MDN内容 #

文档中使用块布局规则的最外层元素会建立第一个（即初始）块格式化上下文（BFC）。这意味着<html>元素块内的所有元素都按照正常流（Normal Flow），遵循块和内联布局规则进行排列。参与BFC的元素遵循CSS盒模型中规定的规则，该模型定义了元素的外边距、边框和内边距如何与同一上下文中的其他块交互。

我的疑问 #

我是否可以将**正常流（Normal Flow）**视为BFC中的布局方式，且正常流是由根元素（<html>）创建的最大BFC？我绘制的粗略理解模型是否正确？

查阅资料 #

• MDN《格式化上下文简介》
• MDN《正常流中的块与内联布局》
• CSS规范文档相关概念：视觉格式化模型、块容器盒、块级盒、块盒

解答 #

你的理解方向没问题，但需要明确几个概念的边界：

1. 正常流是BFC内部的默认布局逻辑，而非BFC本身
   BFC是一种渲染隔离环境，它规定了内部元素的布局规则；而正常流是BFC（以及内联格式化上下文IFC等）中元素默认的排列方式——块级元素垂直堆叠，内联元素水平排列，元素按文档顺序依次排布。

2. 根元素<html>确实创建了页面的初始BFC，这是最顶层的BFC
   页面中未被其他BFC包裹的元素，默认都处于这个根BFC的正常流中。但要注意：除根元素外，其他元素也可通过overflow: hidden、display: flex/grid等属性创建独立的BFC，这些BFC内部的元素同样遵循正常流，但会与外部BFC形成隔离（比如解决外边距折叠、清除浮动溢出等问题）。

3. 关于你的心智模型：
   如果模型核心是“根BFC包裹整个页面的正常流元素，且正常流是BFC内的默认布局方式”，那么这个模型是正确的。但需要补充：页面中可以存在多个独立BFC，每个BFC内部都有自己的正常流，彼此布局互不干扰。

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