overflow:hidden不能清除浮动，仅通过触发bfc使父容器包含浮动子元素高度，但会裁剪溢出内容；在flex/grid、transform等场景下失效，且有隐藏弹层、卡顿滚动等副作用。
overflow: hidden 不能真正清除浮动，它只是触发 BFC 让父容器“看起来”包住了浮动子元素——但浮动本身仍在文档流外，且内容可能被意外裁剪。
为什么 overflow: hidden 会让父容器“撑开”高度
它不操作 float 属性，而是让父元素创建一个新的块级格式化上下文（BFC）。BFC 容器会把内部浮动元素纳入高度计算范围，所以父容器突然“感知”到子元素高度，不再塌陷。
- 仅对
display为block、inline-block等传统块盒生效；overflow: visible不触发 BFC - IE6/7 下会强制触发
hasLayout，可能引发 margin 合并异常或双倍边距 - 若父元素已设
height或max-height，BFC 触发后高度仍被限制，看似无效
哪些情况加了 overflow: hidden 也无效
常见“写了却没用”，往往不是语法错误，而是被其他样式覆盖或干扰：
- 父元素用了
display: flex或display: grid—— 这两种 display 值会禁用 BFC 触发能力 - 父元素有
transform、filter、will-change等属性，创建了新层叠上下文，BFC 不生效 - CSS 优先级问题：
overflow: visible或auto被更高权重要求覆盖，实际 computed 值不是hidden - 父元素设置了
height或max-height，强行压住了 BFC 的高度伸展效果
overflow: hidden 清除浮动的典型副作用
它本质是裁剪，不是清理。溢出内容会被静默截断，且影响交互行为：
-
position: absolute弹层、下拉菜单、提示框会被直接切掉 -
box-shadow、transform溢出部分（如滑入动画）可能消失 - 移动端滚动区域若在该容器内，
touchmove可能卡顿或失效 - 配合
transform: translateZ(0)等硬件加速写法时，BFC 触发不稳定，尤其在 Safari 中
什么场景下可以临时用 overflow: hidden 应急
仅限以下条件全部满足的简单场景，且必须加注释说明后续要重构：
- 父容器内无任何动态弹出、定位偏移、动画位移元素（比如纯图文卡片、固定尺寸 banner）
- 子元素完全在父容器宽高范围内，且 JS 不会动态改变其尺寸或位置
- 不需要支持 viewport 缩放（缩放后裁剪边界可能错位）
- 项目已上线、时间紧迫，又无法改 HTML 结构
- 务必加注释：
/* HACK: BFC 触发，后续需重构为 ::after 清除 */
真正容易被忽略的是：只要父容器用了 transform，哪怕只是 transform: translateZ(0)，overflow: hidden 就可能失效——这点连很多老手都会漏查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
