不能，overflow: hidden 并未清除浮动，而是通过触发 BFC 使父容器重新包裹浮动子项，解决高度塌陷；其副作用明显，现代项目应优先使用 display: flow-root 或 flex/grid 布局。
overflow: hidden 真的能“清除浮动”吗？
不能。它根本没清除浮动——子元素依然 float: left，依然脱离文档流。所谓“清除”，只是父容器因触发 BFC 而重新包裹住了浮动子项，从而解决了高度塌陷。这不是清浮，是“兜浮”。
为什么加 overflow: hidden 就不塌了？BFC 是关键
当父元素设置 overflow: hidden（或 auto/scroll），浏览器会为它创建一个 BFC（块级格式化上下文）。BFC 的天然特性包括：
- 内部浮动元素不会溢出容器边界，会被“包含”在内
- 容器会根据浮动子项的实际高度重新计算自身高度
- 它和外部布局隔离，不会和相邻元素发生 margin 合并等问题
所以不是 hidden 在起作用，而是 BFC 的“包含性”在兜底。
哪些场景下用它会翻车？
它副作用太明显，一不小心就误伤：
立即学习“前端免费学习笔记（深入）”；
- 子元素用了
position: absolute且 top 值为负数 → 仍会溢出，overflow: hidden拦不住 - 子元素用了
transform: translateY(-10px)→ 视觉上移了，但文档流位置没变，裁剪坐标系也不动，照样可见 - 父容器本身有
max-height或固定height→ 高度被锁死，BFC 包裹失效，反而更塌 - 用在导航栏里，下拉菜单一展开就被裁掉 → 因为菜单通常靠
position: absolute溢出父级 - Flex/Grid 容器里加它 → 完全无效，因为 Flex/Grid 自身不依赖 BFC 来包裹子项
现代项目里该用什么替代？
如果你真想解决高度塌陷，又不想冒裁剪风险，优先选语义明确、无副作用的方案：
- 给父容器设
display: flow-root—— 专为创建 BFC 而生，不改溢出行为，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持 - 用伪元素 clearfix：
.clearfix::after { content: ""; display: table; clear: both; }兼容老浏览器，且不影响任何视觉溢出 - 直接放弃浮动：用
display: flex或display: grid布局子项 —— 根本没有浮动，也就没有塌陷问题
BFC 是底层机制，overflow: hidden 只是碰巧能触发它。把它当清浮开关，就像拿胶带修发动机——能应急，但别当设计。
