overflow:hidden不能真正清除浮动，仅通过触发bfc使父容器包含浮动子元素并计算高度，但float属性仍生效；它对flex/grid/transform敏感，易失效且会裁剪absolute元素等副作用。
overflow: hidden 不能真正清除浮动，它只是触发 BFC 让父容器“看起来”包含了浮动子元素——高度不塌了，但 float 属性依然生效、子元素仍脱离文档流。
为什么 overflow: hidden 会让父容器“撑开”
关键不是“清”，而是触发块级格式化上下文（BFC）。BFC 容器会把内部浮动元素纳入自身高度计算，所以父容器突然有了高度。但它对 display: flex / display: grid / transform 等属性敏感，一并存在就可能失效。
- 仅对
display: block、display: inline-block等传统块盒有效；overflow: visible不触发 BFC - 父元素若设了
transform: translateZ(0)或filter: blur(1px)，BFC 就不会创建 —— 这点极易漏查 - IE6/7 下会强制触发 hasLayout，可能引发 margin 合并异常或双倍边距
加了 overflow: hidden 却没效果的常见原因
不是写错了，而是被其他样式压制或干扰了 BFC 触发条件：
-
display: flex或display: grid的父容器上设overflow: hidden—— 这两种 display 值本身禁用 BFC 创建能力 - 父元素有
will-change、transform、filter等属性，创建了新层叠上下文，BFC 失效 - CSS 优先级问题：
overflow: auto或overflow: visible被更高权重要求覆盖，computed 值实际不是hidden - 父元素设置了
height或max-height，硬性限制了高度，掩盖了 BFC 的作用
overflow: hidden 清除浮动的副作用
它本质是裁剪指令，不是布局修复工具，溢出内容会被静默截断：
-
position: absolute弹层、下拉菜单、tooltip 会被直接切掉（比如.nav-item的子菜单消失） - 移动端 touchmove 在该容器内可能卡顿或无法滚动，尤其当内部有横向滑动区域时
- 配合
transform: translateZ(0)等硬件加速写法时，BFC 触发不稳定，Safari 中尤为明显 - box-shadow、outline、text-shadow 等视觉效果可能被裁剪边界截断
什么场景下可以临时用 overflow: hidden 应急
仅限全部满足以下条件的简单静态容器：
- 父容器内无任何
position: absolute、transform位移、JS 动态插入或尺寸变更的子元素 - 子元素完全在父容器宽高范围内，且不会因字体加载、图片懒加载等导致重排溢出
- 不需要 viewport 缩放支持（缩放后裁剪边界偏移，内容意外消失）
- 项目已上线、时间紧迫、又无法改 HTML 结构 —— 此时务必加注释：
/* HACK: BFC 触发,后续需重构为 ::after 清除 */
真正容易被忽略的是：只要父容器用了 transform，哪怕只是 transform: translateZ(0)，overflow: hidden 就可能失效 —— 这点连很多老手都会漏查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
