overflow: hidden 能清除浮动是因为触发BFC使容器重算高度兜住浮动元素，但这只是副作用而非本职工作；它仅对支持BFC的元素生效，在Flex/Grid中无效，且存在裁剪失效、兼容性等问题；现代推荐用display: flow-root或伪元素clearfix清浮。
为什么 overflow: hidden 能清除浮动
它触发了 BFC（块级格式化上下文），让容器重新计算高度，把内部浮动元素“兜住”。这不是它的本职工作，而是副作用——所以别当正经清浮方法用。
- 仅对
display: block或table-cell等支持 BFC 的元素生效 - 如果父容器本身有
height或max-height，可能意外裁剪内容 - 在 Flex/Grid 容器里完全无效，因为它们不依赖 BFC 清浮
- 移动端 Safari 对
overflow: hidden+transform组合有渲染 bug，可能白屏
overflow: hidden 裁剪图片/文字时的坑
它只裁剪「溢出容器边界」的内容，但对定位元素（position: absolute）或 transform 位移后的元素，裁剪行为常被误判。
- 子元素设了
position: absolute且top: -10px，哪怕超出父容器顶部，overflow: hidden也拦不住 - 用
transform: translateY(-5px)上移文字，文字仍可见——因为 transform 不改变文档流位置，裁剪坐标系没变 - 圆角容器（
border-radius）加overflow: hidden才能真正圆角裁剪图片，否则图片直角会露出来
替代 overflow: hidden 清浮的现代写法
真正该用的，是语义明确、无副作用的方法。
- 父容器设
display: flow-root：专为清浮设计的 display 值，兼容 Chrome 64+/Firefox 58+/Safari 15.4+ - 用伪元素清浮：
.clearfix::after { content: ""; display: table; clear: both; }兼容老浏览器，但多一层 DOM 干扰 - 直接改布局：把浮动子项换成
display: inline-block或 Flex 子项，从根源避免浮动
什么时候必须用 overflow: hidden 裁剪
只有两种不可替代的场景：强制视觉裁剪 + 防止滚动条闪现。
立即学习“前端免费学习笔记（深入）”；
- 做卡片头像时，
border-radius: 50%必须配overflow: hidden，否则图片边缘穿出圆形 - 动画中元素短暂溢出（比如 slide-in 过程中 x 坐标为负），加
overflow: hidden可避免容器突然出现滚动条 - 第三方组件（如某些轮播库）内部依赖
overflow: hidden控制视口，强行删掉会导致内容错位
记住：它不是清浮开关，也不是万能裁剪刀。用之前先问一句——我到底想解决什么问题？是高度塌陷，还是视觉越界？答案不同，解法就该不同。
