必须删除float、clear、overflow:hidden、zoom:1及仅用于并排的display:inline-block；Flex容器须精准设在包裹浮动项的直接父级上，而非全局或子元素；需按语义映射对齐方式并注意IE10/11、旧Safari等兼容性问题。
直接删掉所有 float、clear、overflow: hidden、zoom: 1 和仅用于并排的 display: inline-block，再给那个“实际包裹浮动项”的父容器加 display: flex——不是整个页面，也不是子元素自己加。
哪些CSS声明必须立刻删除
残留的浮动相关样式会干扰Flex渲染，导致错位、高度塌陷或基线对齐异常：
-
float: left和float: right在 Flex 容器中完全失效，必须全删 -
clear: both没有意义：Flex 子项不脱离文档流，无需清除 -
overflow: hidden若曾用来清除浮动，现在要删——它会裁剪align-items: stretch下拉伸的内容 -
zoom: 1是 IE6/7 的 BFC hack，Flex 容器天然创建 BFC，留着反而可能触发 IE11 的盒模型 bug -
display: inline-block若仅用于让块级元素并排（非图文绕排），也得删；和 Flex 共存时易引发基线对齐问题
Flex容器该设在哪一层
设错层级是重构后视觉撕裂的主因。关键不是“加了flex就行”，而是找对那个语义上的“行容器”：
- 典型结构：
<div class="row"><div class="col"></div><div class="col"></div></div>→ 给.row加display: flex - 如果原布局有“浮动标题 + 浮动正文”，它们属于不同逻辑行，应分属两个独立 Flex 容器，不能塞进同一个
.wrapper - 别给
body或全局.container加display: flex：导航、页脚会被强行纳入同一弹性流，margin折叠异常、垂直居中失效等问题集中爆发
如何映射 float:left/right 的对齐意图
Flex 不是浮动的镜像替代，硬套“float 左 → justify-content 左”会出错。关键是理解控制维度：
立即学习“前端免费学习笔记（深入）”；
- 单行左右分栏（如 logo + nav）：用
justify-content: space-between，不是flex-start - 右对齐按钮组：用
margin-left: auto推到最后，比float: right更可靠，且不脱离文档流 - 等宽多列（如三列新闻卡）：子项设
flex: 1或flex-basis: 33.33%，别再写width: 33.33%+float: left - 图文环绕场景（
<img>在段落中左浮）：保留float，但只作用于<img>自身，绝不能加在 Flex item 上
移动端与旧浏览器兼容性要点
基础 Flex 在 iOS Safari 9+、Chrome for Android 4.4+、微信 X5 内核 6.8+ 都稳定支持，但以下细节容易翻车：
- iOS 8 及更早不支持
flex-wrap: wrap，若必须支持，得用媒体查询降级为display: block+width - Android 4.3 原生浏览器会忽略
flex: 1，建议显式写flex: 1 1 auto或配合min-width: 0防止溢出 - 微信 7.0.20 以下版本对
align-self支持不稳定，优先用容器级align-items控制 - 真正卡住的往往不是 CSS，而是 JS 里那些依赖
offsetTop、getBoundingClientRect()等基于浮动位置做的判断逻辑
最常被忽略的是：图文环绕和 JS 位置计算逻辑。前者不能无脑转 Flex，后者不清理就等于埋雷。
