直接将浮动布局替换为Flex布局：删掉float、clear及清除浮动的overflow:hidden和zoom:1，仅给直接父容器设display:flex；图文环绕的float保留，两栏布局等语义性浮动必须删；注意层级精准、gap替代margin、处理JS隐式依赖。
直接删掉所有 float、clear、overflow: hidden（用于清除浮动的）、zoom: 1，然后把包裹浮动项的**直接父容器**设为 display: flex——不是全局加，也不是子元素自己加，加错层级就白干。
哪些 float 必须删，哪些可以留？
不是所有 float 都要动。关键看语义和用途：
-
float: left用在<img>上实现图文环绕？保留——Flex 不支持环绕，硬改反而导致文字换行错位或截断 -
float: left用在.sidebar和.main上做两栏布局？必须删——这是典型响应式失效根源，移动端极易“掉行”或高度塌陷 - 看到
margin-left: 200px配float: right这种靠猜宽度挤位置的写法？立刻替换——视口稍一缩放就错位 - HTML 里一堆
<div class="clear"></div>？说明清除逻辑已失控，是重构强信号
Flex 容器该加在哪一层？
加错位置是重构后视觉撕裂的主因。必须精准落在“承担一行内排多个块”的那个父级上：
- 结构是
<div class="row"><div class="col"></div><div class="col"></div></div>？给.row加display: flex - 有“浮动标题 + 浮动正文”两个独立逻辑行？它们应分属两个不同 Flex 容器，不能塞进同一个
.wrapper - 给
body或全局.container加display: flex？会导致导航、页脚被强行拉进同一弹性流，margin折叠异常、垂直居中失效
替换后容易踩的坑有哪些？
语法能换，行为未必一致。常见翻车点：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
- 原
float: left子项默认不占满父容器，Flex 子项默认flex-shrink: 1，小屏下文字可能被压缩 → 加flex-shrink: 0或设min-width - 原来靠
margin-right分隔？换成gap（现代）或margin-right+:last-child { margin-right: 0; }（兼容） - 原结构“左固定宽 + 右自适应”，别写
flex: 0 0 200px+flex: 1，用flex: none和flex: auto更稳 -
vertical-align在 float 里生效，在 Flex 里失效 → 原来靠它对齐图标？改用align-items: center
JS 里藏着的隐式依赖更危险
真正卡住的往往不是 CSS，而是 JS 里那些没写出来的假设：
- 用
offsetTop或getBoundingClientRect()读取浮动后坐标做判断？Flex 下坐标全变，必须重测 - 靠
float脱离文档流辅助绝对定位？Flex 子项默认不脱离流，得手动加position: absolute并重算top/left - 老代码用
::after清除浮动，同时 JS 监听resize基于“清除后高度”做逻辑？清除代码可删，但 JS 里那部分必须同步改
重构完打开开发者工具，重点检查 computed 样式里 float 是否显示为 none，再确认 display 确实是 flex——很多问题其实卡在父级没生效，而不是 Flex 本身不可靠。
