overflow:auto 对浮动子元素“没反应”是因为浮动导致父容器高度塌陷，内容未真正溢出；需先清除浮动或触发bfc（如display:flow-root），overflow才生效。
overflow:auto 为什么对浮动子元素“没反应”
父容器写了 overflow: auto 却不出现滚动条，常见原因是它根本没“溢出”——因为浮动子元素脱离文档流，父容器高度塌陷为 0 或极小值，内容实际没超出容器边界。
典型现象：
- 开发者工具里看到父容器的
computed height是0px或远小于视觉高度 - 把
overflow改成visible后，内容突然“撑开”容器并显示出来（说明塌陷才是真问题） -
overflow: hidden能让背景/边框显示，但内容被裁掉、滚动条仍不出现
这不是 overflow 失效，是它在“正确执行”：没有溢出，就不滚动。先解决塌陷，overflow 才有作用对象。
父容器触发 BFC 失败的几个硬性条件
overflow: hidden 或 auto 要生效，必须成功触发 BFC。但以下情况会直接失败：
- 父容器设了
position: absolute或fixed→ 它已脱离文档流，自身高度计算逻辑失效 - 父容器是
display: flex或display: grid→float在该上下文中被忽略，float的computed值会变成none，BFC 触发无意义 - 父容器同时设了
display: inline-block且未设width→ 宽度收缩，可能意外截断内容，overflow行为不稳定 - 父容器的
height或max-height是auto且无其他限制 → 即使触发 BFC，容器仍会无限撑高，“溢出”永远不会发生
clear: both 加错位置导致 overflow “白加”
clear 不是给浮动元素自己加的，它只影响“紧跟其后的块级兄弟元素”。如果误写成：
.float-item { clear: both; }
那 overflow 就成了摆设——因为浮动元素自己根本不会响应 clear，父容器依旧塌陷。
真正起效的组合是：
- 浮动元素后面紧跟着一个块级元素（如
<div>、<code><p></p>） - 那个兄弟元素设置了
clear: both，且它的display是block（不是inline或inline-block） - 这个兄弟元素没被
position: absolute或transform移出流，否则clear也无效 - 浮动子元素在 Flex 容器里会被强制转为
display: block，但float属性本身被忽略 →overflow触发 BFC 没意义 - Grid 容器中浮动元素完全脱离网格轨道，可能叠在其他格子上，
overflow只裁剪容器区域，不阻止层叠错位 - 使用
transform动画的浮动元素，在旧版 Safari 中遇到overflow: hidden父级时，可能出现闪烁或错位
如果结构里没有合适位置放 clear 元素，别硬塞空 <div class="clear"></div>，直接用 display: flow-root 更干净。
现代布局中 float + overflow 的隐性冲突
当项目已用 Flex 或 Grid 做主布局，又在局部强行混入 float，overflow 很容易“看似有效实则埋雷”：
真正难处理的，往往不是 overflow 写没写对，而是 float 还在不在该出现的地方。能用 display: flex 或 grid 替代的，就别留 float 接口。
