浮动导致父容器高度塌陷的根本原因是float使子元素脱离文档流，父容器无法计算其高度；overflow:hidden并非清除浮动，而是触发BFC使父容器包含浮动高度；display:flow-root是更优解，语义明确且无副作用。
浮动元素导致父容器高度塌陷的根本原因
因为 float 让子元素完全脱离文档流，父容器在计算自身高度时“看不见”这些子元素，结果高度坍缩为 0——不是元素真的“跑出去了”，而是父容器根本没给它们留空间。后续文字、边框、背景色都会因此错位或消失。
overflow: hidden 真的能“清除浮动”吗
不能。overflow: hidden 并不改变 float 的行为，它只是触发 BFC（块级格式化上下文），让父容器开始把浮动子元素的高度纳入计算范围。视觉上父容器“撑开了”，但浮动本身仍在生效：
- 如果后面紧跟一个普通流
<div>，它仍可能被浮动元素“顶开”（尤其当父容器高度修复后未重设clear） -
position: absolute子元素若偏移出父容器，会被overflow: hidden强制裁剪——这不是清除，是遮盖 - IE6/7 下它靠触发
hasLayout“凑合”工作，但逻辑和现代 BFC 不同
display: flow-root 是更干净的替代方案
这是专为解决此类问题设计的 CSS 值，语义明确：创建一个无副作用的 BFC 容器。
- 它不裁剪任何溢出内容（
box-shadow、transform偏移、下拉菜单全保留） - 不需要额外伪元素或 hack，一行代码：
display: flow-root - 兼容性已覆盖 Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+，2026 年绝大多数项目可直接用
- 若需支持 IE，才退回到
clearfix类（::after { display: table; clear: both; }）
什么时候真该用 overflow: auto 或 hidden
仅当你**确实需要裁剪溢出**，且能接受副作用时才用：
立即学习“前端免费学习笔记（深入）”；
- 卡片内浮动图标 + 文字，文字过长需截断 → 配合
text-overflow: ellipsis和固定宽度 - 防止装饰性浮动元素（如角标、浮点线）破坏容器边界
- 旧项目维护，无法改结构，又确认没有下拉菜单、tooltip 等绝对定位内容
- 注意 Safari 对
overflow: auto渲染空滚动条较敏感，优先选hidden或加-webkit-overflow-scrolling: touch
真正容易被忽略的点是：浮动布局本身已是过时模式。只要不是做图文环绕，就该用 display: flex 或 display: grid ——它们天然创建 BFC，子项自动参与高度计算，连“清除”这个概念都不再存在。
