浮动导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；BFC是标准解法，推荐用display: flow-root，兼容场景可选overflow: hidden。
为什么浮动会让父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时“看不见”它们，直接按内部非浮动内容撑开——如果子元素全浮动，父容器就缩成一条线。
这不是 bug，是 CSS 规范定义的行为。关键不是“怎么加个清除”，而是“怎么让父容器重新包含浮动子元素”。BFC（块级格式化上下文）是标准解法，它强制容器建立独立渲染区域，自然包含内部浮动。
触发 BFC 的可靠方式有哪些
不是所有 CSS 属性都稳定触发 BFC，尤其在老浏览器或某些组合下会失效。以下几种在现代浏览器中兼容性好、语义清晰：
-
overflow: hidden（最常用，但注意会裁剪溢出内容） -
display: flow-root（专为此设计，推荐优先用，IE 不支持） -
float: left或right（本身触发，但会让父容器也浮动，通常不适用） -
position: absolute（脱离文档流，父容器不再参与布局，一般不用）
别用 overflow: auto 做默认方案——滚动条可能意外出现；也别依赖 display: inline-block，它会引入空白间隙问题。
立即学习“前端免费学习笔记（深入）”；
display: flow-root 和 overflow: hidden 怎么选
display: flow-root 是语义最干净的：它只创建 BFC，不影响溢出行为、不隐藏内容、不改变盒模型尺寸。如果你的父容器本就不该有滚动或裁剪，就该用它。
overflow: hidden 是兼容兜底方案，IE11 及以上都支持，但得确认两点：
- 子元素是否真有溢出？比如带负 margin 的卡片、动画位移、伪元素延伸
- 是否允许用户无法滚动查看超出部分？比如响应式侧边栏菜单
示例对比：
.container { display: flow-root; } /* 推荐，明确意图 */<br>.container { overflow: hidden; } /* 兼容旧环境，但需验溢出 */
哪些情况 BFC 也不起作用
常见误区是以为加了 display: flow-root 就万事大吉。实际失效多因层级或继承干扰：
- 父容器本身被
display: none或visibility: hidden隐藏，BFC 仍存在但不可见 - 父容器设置了
height固定值，BFC 能包含浮动，但高度被锁死，视觉上还是“塌”着 - 子元素用了
transform或position: absolute，它们不参与 BFC 高度计算
调试时先检查 computed styles 确认 BFC 是否生效（浏览器开发者工具里看 “Layout” 或 “Computed” 面板里是否有 “Block formatting context” 提示），再排查样式覆盖或定位干扰。
浮动清除本质是布局控制权的回收，BFC 是手段，不是魔法。容易被忽略的是：父容器是否还受外部 flex/grid 容器约束、是否被祖先的 contain: layout 截断，这些都会让 BFC 表现异常。
