overflow: hidden 不撑开父容器高度是因为它仅触发BFC，若父元素有height/max-height、position: absolute或display: flex/grid等限制则失效；现代推荐用display: flow-root。
为什么 overflow: hidden 有时不撑开父容器高度
常见错觉是只要加了 overflow: hidden 就能“清除浮动”，但实际它只是触发 BFC（块级格式化上下文），让父元素重新计算包含浮动子元素的尺寸。如果父元素本身有 height、max-height 或 position: absolute 等限制，BFC 也无能为力。
典型问题场景：
- 父元素设置了固定
height: 200px—— 浮动子元素超出后被裁剪，高度不会自适应 - 父元素是
position: absolute且未设top/left/bottom/right—— 高度计算行为异常 - 父元素存在
display: flex或display: grid—— 此时overflow不再触发传统 BFC，清除效果失效
clearfix 类没生效的几个硬伤
经典 .clearfix::after 方案依赖伪元素生成内容并设置 clear: both，但它在以下情况会静默失败：
- 父元素设置了
overflow: visible且同时有transform、filter或will-change—— 这些属性会创建新的层叠上下文，干扰伪元素的清除逻辑 - 子元素用了
float: right但父元素宽度不足，导致浮动元素换行或溢出，::after的clear只作用于当前行，无法兜底 - CSS 文件加载顺序错误：如果
.clearfix定义在浮动样式之后，而你又用!important覆盖了::after的content值（比如变成content: ""），清除就彻底失效
.clearfix::after {
content: "";
display: table;
clear: both;
}
现代项目该用哪个方案更稳
优先级从高到低：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器只需包裹浮动内容，且不需兼容 IE8–9：
display: flow-root是最干净的解法，它明确创建 BFC 且不带overflow的副作用 - 若需兼容老浏览器，且父元素没有其他
overflow需求：overflow: hidden仍可用，但必须确保父元素没设死高度、没用position: absolute、没和flex/grid混用 -
clearfix仅推荐用于必须支持 IE6–8 的遗留系统；现代项目中，它的维护成本（要记清伪元素写法、防止被覆盖）远高于收益
注意：display: flow-root 在 Safari 15.4+ 和 Chrome 58+ 支持良好，Firefox 全版本支持，基本可放心用。
调试时先看这三件事
别急着改 CSS，打开开发者工具快速验证：
- 检查父元素 computed 样式里
height是否显示为auto—— 如果是具体数值（如12px），说明被某个规则锁死了 - 在 Elements 面板里临时删掉所有
float，看父元素高度是否立刻恢复 —— 确认是否真由浮动引起 - 右键父元素 → “Force element state” → 勾选
:hover，再看 height 变化 —— 有时overflow触发 BFC 的时机和伪类状态有关联
浮动清除本质是布局模型层面的问题，不是加个 class 就能一劳永逸。关键在理解当前父容器的渲染上下文是否真的被重置，而不是机械套用代码片段。
