直接替换float→flex易崩，因flex默认nowrap不换行、子项flex属性与float行为不等价，且float/clear/vertical-align在flex中被规范忽略，原margin或width未同步调整会导致错位、间隙异常或JS依赖失效。
不能一键替换，必须人工判断原布局意图再重写；盲目把 float: left 改成 display: flex 反而更容易崩。
为什么直接替换 float → flex 会出问题
Flex 容器默认 flex-wrap: nowrap，而浮动天然换行；子元素没设 flex 相关属性时，它们会按默认 flex: 0 1 auto 拉伸或收缩，和原始 float 行为不等价。更关键的是：float、clear、vertical-align 在 Flex 容器中直接失效——不是被覆盖，而是被忽略。如果老代码里靠 margin-left 模拟浮动间隙，迁移到 Flex 后这些 margin 还在，但对齐逻辑已变，极易错位。
- 常见错误现象：
.nav-item { float: left; margin-right: 20px; }→ 改成父容器display: flex后，子项没删margin-right，导致间隙翻倍 - 原始 float 元素若设了
width: 200px，对应 Flex 中应优先考虑flex-basis: 200px，而非flex: 1 - IE11 及以下不支持部分 Flex 属性（如
gap），若项目仍需兼容，得用margin或伪元素模拟间距
如何用 WebStorm 辅助但不依赖“自动转换”
WebStorm 的「Convert to Flexbox」菜单只在已有 display: flex 的前提下调整子项对齐方式，它不会从 float 推导出布局目标。真正能提速的是它的实时校验能力。
- 在 Elements 面板中选中父容器，看 Computed 样式确认当前生效的布局模式（是
float还是inline-block） - 手动删掉所有
float、clear、vertical-align，再给父容器加display: flex，WebStorm 会立刻标红未闭合的括号或拼写错误 - 对每个子元素按
Ctrl+Q呼出 Quick Documentation，查flex-grow和flex-shrink的实际效果——比如原 float 元素宽度固定，就不该设flex-grow: 1
响应式断点里浮动必须彻底清除，不能只改值
老项目常在 @media (max-width: 768px) 里写 float: none; width: 100%，这仍是浮动流里的“隐身 float”，某些浏览器（尤其是旧版 Safari）会在尺寸切换瞬间残留渲染状态，造成跳位。真正退出要切断浮动链。
立即学习“前端免费学习笔记（深入）”；
- 移动端断点内，除了
float: none，必须显式加display: block或display: flex，确保脱离浮动上下文 - 若原布局是三栏
float: left，响应式后想单列，仅靠width: 100%不够，得验证每个子项是否还参与浮动流（检查 Computed 的float值是否为none） - 测试重点不是静态快照，而是缩放窗口过程中的连续帧：元素是否闪动、文字是否重排、下拉菜单是否错位
clearfix 类别删就完事，得先看 JS 是否依赖它
很多轮播图、下拉菜单插件靠父容器有高度来定位子元素，而 .clearfix::after 正是撑开高度的补丁。直接删掉，JS 可能拿不到正确 offsetHeight，导致遮挡或错位。
- 先全局搜索
document.querySelector或getBoundingClientRect，确认哪些 JS 模块读取了父容器高度 - 把
.clearfix替换为display: flex后，要验证position: absolute子元素是否被意外裁剪（旧版overflow: hidden清除方案可能还在） - 只在真正需要的地方加清除类，比如表单行、卡片列表——别沿用“所有浮动父容器都塞一个”的惯性
最易被忽略的点是：迁移不是改样式，而是重定义容器与子项的关系。float 是副作用，Flex 是声明式控制；你得先回答“这个容器到底要实现什么”，再决定用 justify-content 还是 flex-wrap，而不是抄一段网上的 flex 示例就往上贴。
