清除浮动是解决浮动元素导致父容器高度塌陷的布局技巧；常用方法包括伪元素法（.clearfix::after）、触发BFC（如overflow:hidden或display:flow-root）及clear属性，其中伪元素法最推荐。
overflow:auto 本身就不清除浮动
它只是触发了 BFC（块级格式化上下文），让父容器「包含」浮动子元素，从而撑开高度——但 float 属性依然生效，子元素仍脱离文档流。这不是清除，是包裹。如果你期待的是让浮动元素回归文档流、恢复正常流式布局行为，overflow:auto 做不到这一点。
父容器高度被显式限制时，BFC 也救不了
当父容器设置了 height、max-height 或被 flex/grid 父项约束了尺寸，即使触发了 BFC，它的高度也不会自动增长去容纳浮动内容。此时你看到的仍是塌陷或滚动条异常，因为浏览器严格按你写的尺寸渲染，不是按内容需要。
-
max-height: 200px+ 浮动子项总高 250px → 滚动条出现，不是“清除失败”，而是高度被锁死 -
display: flex的子容器设了overflow: auto→ flex 项高度由父 flex 容器分配，BFC 不改变分配逻辑 - 用开发者工具检查 computed
height，如果远小于浮动子项实际占据空间，基本可确认是尺寸限制问题
父容器自己也是浮动元素时，overflow 失效
如果父容器本身设置了 float: left 或 float: right，它就无法形成独立的 BFC（规范要求 BFC 必须是块级、非浮动、非绝对定位的容器）。此时无论你加 overflow: auto 还是 hidden，都无效。
- 常见于老式导航栏嵌套：外层
.nav浮动，内部.menu再浮动子项，然后想靠overflow:auto撑高 —— 行不通 - 验证方法：把父容器的
float去掉，再看overflow:auto是否突然“生效” - 替代方案：改用
display: inline-block或直接上display: flow-root（前提是父容器不需浮动）
现代项目里，别再依赖 overflow 清浮动
真正容易被忽略的是：你加 overflow:auto 的那一刻，就已经在为后续交互埋雷。下拉菜单、box-shadow、transform 位移的 tooltip，甚至 position: absolute 的子元素，都可能被裁剪或误判溢出。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root是专为此设计的，无滚动副作用，语义明确，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持 - 如果必须兼容旧 Safari（::after 伪元素 clearfix 更可控，不干扰溢出逻辑
- 更根本的解法：问一句——这些元素非得用
float吗？Flex/Grid 几乎能覆盖所有传统浮动场景，且天然不存在塌陷问题
