设置display:flow-root的div：形成BFC还是IFC？请技术解析

结论：这个设置了display: flow-root的div会形成BFC（块级格式化上下文），原因如下：

核心依据：flow-root属性的固有特性 #

根据CSS规范，display: flow-root的定义就是让元素成为一个块容器盒，并且强制创建BFC——这是该属性值的核心功能，不受内部子元素类型的影响。不管容器内是否包含块级盒子，只要设置了flow-root，就一定会生成BFC。

对“不含块级盒子的块容器盒生成IFC”规则的澄清 #

你提到的“不含块级盒子的块容器盒会建立IFC”，是针对**常规块容器盒（比如默认display: block的div）**的行为规则。但这条规则不适用于flow-root这种特殊的块容器盒——因为flow-root的规范优先级更高，它直接覆盖了常规块容器盒的默认格式化上下文规则。

验证逻辑 #

假设把示例中的div改成默认display: block，里面只放span时，确实会生成IFC；但换成display: flow-root后，不管内部是span还是块级元素，容器都会生成BFC，这是flow-root属性的设计初衷——用来创建一个不会被外部浮动影响、能包含内部浮动的BFC容器，同时避免常规BFC触发方式（如overflow:hidden）带来的副作用。

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