必须立刻删除用于多栏布局的float（如float:left+width:33.33%）、靠margin-left:-9999px或clear:both强行定位、JS中直接操作element.style.float；图文环绕类float（如img{float:left}）保留不动。
能，但必须先判断哪些 float 是布局逻辑、哪些是语义刚需——盲目全局替换 float: left 为 display: flex，90% 的翻车都发生在这里。
哪些 float 必须立刻删，哪些得留着不动
重构前扫一眼 CSS 文件，重点盯三类写法：
-
float: left+width: 33.33%或width: 200px搭配.sidebar/.main类名 → 这是典型多栏布局，必须删，换display: flex或display: grid -
img { float: left; margin-right: 1em; }这种在<p></p>里单独浮动的图片 → 别动，这是图文环绕唯一无 JS、无 wrapper 的原生方案，改了反而文字截断或错行 -
.clear { clear: both; }或::after { content: ""; display: table; clear: both; }→ 全部删，Flex 容器下clear被浏览器强制计算为none，留着纯属干扰
display: flex 应该加在哪一层？
不是加在最外层 或全局 .container，而是精准落在「实际包裹浮动子项的那个直接父容器」上。比如：
<div class="row"> <div class="col"></div> <div class="col"></div> </div>
就只给 .row 加 display: flex；如果 HTML 中有「浮动标题 + 浮动正文」两个不同逻辑块，它们必须分属两个独立 Flex 容器，塞进同一个 .wrapper 会导致垂直对齐异常、margin 折叠失效。
立即学习“前端免费学习笔记（深入）”；
替换后最常漏掉的三类残留
真正卡住上线的往往不是样式本身，而是隐性依赖：
- HTML 中仍按浮动顺序写 DOM（如左栏必须写在右栏前）→ Grid/Flex 下 DOM 顺序已失去布局意义，但旧 JS 可能还依赖
offsetLeft或getBoundingClientRect()计算位置，不清理会静默错位 - 注释里还留着
// 清除浮动防止塌陷→ 新人看到会误以为还在起作用，建议直接删 - JS 里监听
window.resize后手动补高度、插<div class="clear"> → Flex/Grid 自动撑高，这类逻辑全部失效，必须移除 <h3>为什么 overflow: hidden 清浮动必须换成 display: flow-root</h3> <p>老代码里满屏 <code>overflow: hidden看似“止血”，实则埋雷：它会裁掉box-shadow、遮住position: absolute的下拉菜单、让getBoundingClientRect()返回错误尺寸。现代浏览器（Chrome 64+ / Firefox 58+）支持display: flow-root，效果一样——触发 BFC 包裹浮动子项，但完全不干预溢出行为。操作时注意：- 全局搜索
overflow:\s*hidden;，排除轮播图、裁剪头像等真需要裁剪的场景 - IE11 不支持
display: flow-root，需用@supports not (display: flow-root) { ... }回退到伪元素清除法 - 若父容器已设
display: flex或display: grid，再加display: flow-root会冲突失效
最容易被忽略的，是第三方组件或富文本输出的 HTML 里是否还藏着
float——比如 CMS 输出的<img alt="如何在现代CSS中使用Flexbox快速重构传统基于float的历史遗留页面？" >带style="max-width:90%"，直接塞进 Flex 容器会失效，得包一层 wrapper 再处理。 - 全局搜索
