关于CSS格式化模型的疑问求助：BFC及匿名盒相关问题

1. BFC是否会对孙元素产生影响？ #

BFC的约束仅直接作用于自身的直接子盒子，孙元素的布局是否受影响取决于其父容器：

• 如果孙元素的父容器没有创建新的格式化上下文（FC），那么孙元素会处于祖辈的BFC中，遵循BFC的布局规则；
• 如果孙元素的父容器创建了自己的FC（比如另一个BFC、行内格式化上下文IFC等），则孙元素仅受父容器FC的规则约束，与祖辈BFC无关。

2. 若一个div不属于BFC，它属于哪种格式化上下文（FC）？其内部元素的布局规则是怎样的？ #

未触发BFC条件的div，不会创建自己的FC，它会归属到父元素的格式化上下文中：

• 若父元素是块格式化上下文（包括根FC），该div作为块级盒子参与父FC的垂直排列；其内部元素默认会继承父元素的FC环境，块级子元素垂直排列、外边距折叠，行内子元素则会创建内部的IFC，水平排列并自动换行。
• 若父元素是行内格式化上下文（IFC），该div会被当作块级盒子打断行内流，单独占据一行，其内部元素仍遵循块级布局规则。

3. body元素并非BFC容器，为何其内部元素仍会发生外边距折叠且垂直排列？这些特性难道不是BFC独有的吗？ #

外边距折叠、块级元素垂直排列是块格式化上下文的通用特性，而body所在的是根格式化上下文（Root Formatting Context）——这是一种特殊的块格式化上下文，不需要满足普通BFC的触发条件（如overflow:hidden），但具备BFC的核心布局规则。因此body内部元素遵循根FC的规则，自然会出现这些特性，并非只有普通BFC才拥有。

4. CSS规范指出Block Formatting Context（BFC）内的盒子会逐一垂直排列，这一规则是否适用于BFC内的行内级元素？若不适用，是否意味着CSS规范的描述不够严谨？ #

规范中提到的“盒子”特指块级盒子，行内级元素在BFC中的布局遵循补充规则：

• 未被块级盒子包裹的行内级元素，会被自动包裹进匿名块级盒子中，这些匿名块盒会作为BFC的直接子盒垂直排列；
• 行内级元素本身则在匿名块盒内部的行内格式化上下文（IFC）中水平排列。

规范的描述不存在不严谨，它明确了BFC针对块级盒子的核心规则，行内元素的布局是通过“匿名块盒包裹”的方式融入BFC体系，属于规则的细节补充。

给出的代码如下：

<style>
  .wrapper {
    overflow: hidden;
  }
</style>
<div class="wrapper">
  <span>你好</span>
  <div>世界</div>
  <span>哈哈</span>
    <span>呵呵</span>
</div>

会生成匿名块级盒子，具体逻辑： #

1. .wrapper通过overflow:hidden触发了BFC，成为块格式化上下文容器。
2. 根据CSS规范，BFC内的行内级元素若未被块级盒子包裹，会被自动包裹进匿名块级盒子：
   • 第一个<span>你好</span>是单独的行内元素，被包裹进匿名块盒1，作为BFC的直接子盒参与垂直排列；
   • <div>世界</div>是块级盒子，直接作为BFC的子盒排列；
   • 相邻的<span>哈哈</span>和<span>呵呵</span>属于连续的行内元素，被包裹进同一个匿名块盒2，作为BFC的直接子盒排列。
3. 最终.wrapper的直接子盒结构为：匿名块盒1 → div盒子 → 匿名块盒2，行内元素在各自的匿名块盒内部的IFC中水平排列。

内容的提问来源于stack exchange，提问作者丁少华