overflow:hidden并不清除浮动，而是通过触发bfc使父容器包含浮动子元素高度；在flex/grid布局中无效，因float被忽略且bfc已存在。
overflow:hidden 本来就不清除浮动
它只是触发 BFC（块级格式化上下文），让父容器「包含」浮动子元素，从而看起来像“清除了”。但浮动本身没被取消，float 依然生效，子元素仍脱离文档流——只是父容器现在能正确计算高度了。
父容器 display 值为 flex 或 grid 时 overflow:hidden 失效
当父元素设了 display: flex 或 display: grid，它已经是 BFC，且 overflow 属性不再触发额外的 BFC。此时加 overflow: hidden 完全多余，也起不到包裹浮动的效果。
- 子元素上的
float在 flex/grid 容器中会被忽略，根本不需要“清除” - 若看到 flex 容器里还写
float: left+overflow: hidden，说明布局逻辑混乱，该删掉float - 想让子元素左对齐？用
justify-content: flex-start或align-self更准确
这些属性会让 overflow:hidden 触发 BFC 失败
overflow: hidden 能否触发 BFC，取决于父容器是否处于“可创建传统 BFC”的渲染上下文中。以下情况会静默失效：
- 父元素有
transform（哪怕只是transform: translateZ(0)）、filter或will-change—— 它们会创建新层叠上下文，干扰 BFC 触发 - 父元素设置了
height或max-height，强制限高后，BFC 虽然存在，但高度不会自适应浮动内容 - CSS 优先级问题：其他规则把
overflow覆盖成了visible或auto，实际 computed 值不是hidden - 父元素是
position: absolute且未设四边定位值，高度计算行为异常，BFC 无法正常作用
真正容易被忽略的兼容性陷阱
现代浏览器中，display: flow-root 是专为创建无副作用 BFC 设计的，语义明确、不裁剪、不干扰滚动。但它在 Safari 15.4 之前、Firefox 58 之前均不支持。如果你项目要兼容旧版 Safari 或老安卓 WebView，overflow: hidden 仍是兜底手段——但必须确认父容器没混用 transform 和固定高度，否则连兜底都不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
