必须删除float、clear、overflow:hidden、zoom:1和仅用于并排的inline-block；Flex容器须设在语义上包裹浮动项的直接父级；单行左右分栏用justify-content:space-between，右对齐按钮用margin-left:auto。
哪些float相关样式必须立刻删除
残留的 float、clear、overflow: hidden、zoom: 1 和仅用于并排的 display: inline-block 会干扰 Flex 渲染，不是“浏览器忽略就没事”，而是可能触发 IE11 盒模型 bug、裁剪 align-items: stretch 拉伸内容、或引发基线对齐异常。
-
float: left和float: right在 Flex 容器中完全失效，必须全删 -
clear: both没有意义：Flex 子项不脱离文档流，无需清除 -
overflow: hidden若曾用来清除浮动，现在要删——它会裁剪子项在交叉轴上的拉伸 -
zoom: 1是 IE6/7 的 BFC hack，Flex 容器天然创建 BFC，留着反而可能触发 IE11 的怪异行为 -
display: inline-block若仅用于让块级元素并排（非图文绕排），也得删；和 Flex 共存时易导致基线错位
Flex容器该设在哪一层
设错层级是重构后视觉撕裂的主因。不是“加了 display: flex 就完事”，而是必须精准落在 HTML 中那个语义上真正包裹浮动项的直接父级上。
- 典型结构：
<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: flex-start”会出错。关键是理解控制维度：float 是子项各自定位，Flex 是容器统一调度。
- 单行左右分栏（如 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 alt="如何将CSS2浮动布局兼容升级为CSS3 Flexbox" >在段落中左浮）：保留float: left，但只作用于<img alt="如何将CSS2浮动布局兼容升级为CSS3 Flexbox" >自身，绝不能加在 Flex item 上
移动端和旧浏览器兼容性断层点
现代移动端基本没问题（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() 基于浮动位置做判断的逻辑——这些必须同步检查和重写。
