BFC能清除浮动是因为它使父容器形成独立渲染区域，将浮动元素包含在内从而撑开高度；触发条件包括float不为none、position为absolute/fixed、display为inline-block/table-cell等、overflow不为visible。
浮动元素会脱离文档流，导致父容器高度塌陷；而BFC（块级格式化上下文）是一个独立的渲染区域，内部的布局不会影响外部，同时也能包含浮动元素——这正是用BFC清除浮动的核心原理。
浮动为什么会导致父容器高度塌陷
浮动元素不再参与普通文档流的高度计算，父容器在计算自身高度时“看不见”浮动子元素，因此高度收缩为0（或仅包含非浮动内容的高度）。
常见表现：
- 父容器背景色、边框不显示
- 后续兄弟元素上移，覆盖浮动区域
哪些CSS属性能触发BFC
只要一个元素满足以下任一条件，就会形成BFC：
-
float 值不为 none（如
left、right） - position 值为 absolute 或 fixed
- display 值为 inline-block、table-cell、table-caption、flex、grid、flow-root
-
overflow 值不为 visible（如
hidden、auto、scroll）
BFC如何清除浮动
当父容器触发BFC后，它会把内部浮动元素“包裹”进来，重新计算自身高度，从而撑开容器、防止塌陷。
立即学习“前端免费学习笔记（深入）”；
典型写法示例：
.container {
overflow: hidden; /* 触发BFC，同时隐藏溢出（若不需要可改用 auto） */
}
.container::after {
content: "";
display: table;
clear: both;
}说明：
- overflow: hidden 是最常用、简洁的BFC清除方式
- display: flow-root 是现代推荐写法（语义清晰、无副作用）
- 伪元素 + clear: both 是传统清除法，不依赖BFC，但需额外代码
BFC清除浮动 vs 传统清除法的区别
传统清除（如 clear: both）作用于「紧邻浮动元素之后的元素」，靠插入一个“挡板”来中断浮动影响；
BFC则是让「父容器自己变成一个隔离盒子」，从根源上包含浮动，更彻底且无需额外标签或伪元素（用 flow-root 时）。
关键区别在于作用对象不同：一个是子元素干预，一个是父容器自洽。
