Appearance
BFC：块级格式化上下文与普通流隔离
主题边界
- BFC 是 CSS 视觉格式化模型中的一种块级格式化上下文，用来约束内部盒子的布局与浮动影响范围。
- 理解 BFC 要把它放回 normal flow、float 与 margin collapsing 的规则里。
机制与流程
- 创建 BFC 的元素会形成独立布局容器，内部浮动不会跑到外部参与同一普通流计算。
- 触发条件包括
overflow非visible、display: flow-root、浮动元素、绝对定位元素、flex/grid 容器等。 - BFC 容器会阻止与外部元素的垂直 margin 折叠，并在计算自身高度时把内部浮动纳入包裹范围。
关键差异
- BFC 解决的是普通流与浮动相互干扰的问题，不等于所有布局隔离。
flow-root是最语义化的 BFC 触发方式，比通过overflow: hidden顺带裁剪内容更明确。
边界条件
- 把
overflow: hidden当 BFC 万能解会引入裁剪、滚动条或阴影截断副作用。 - Flex 与 Grid 容器自身形成新的格式化上下文，但内部子项的布局规则已经不是普通块格式化流。
工程落点
- 老项目中“清除浮动”本质是给父元素制造一个能包住 float 的 BFC。
- 现代布局里 BFC 仍然重要，因为它直接影响 margin collapsing、浮动环绕和局部布局隔离。