必须删除float、clear、display: inline-block（仅绕流时）、zoom: 1及overflow: hidden；Flex容器应精准设在包裹浮动项的直接父级上，而非全局或子元素；需按语义映射对齐方式并注意IE10/11、旧Safari等兼容性问题。
直接删掉所有 float、clear、display: inline-block（仅用于绕流时）、zoom: 1，再把原“行容器”设为 display: flex——不是整个页面加，也不是子元素自己加，而是精准落在那个包裹浮动项的直接父级上。
哪些CSS属性必须立刻删除
浮动布局转Flex时，残留样式会干扰渲染，导致错位或高度塌陷。浏览器虽忽略 float，但旧声明仍可能触发意外计算。
-
float: left和float: right必须全删，Flex 不认它们 -
clear: both没有意义，Flex 子项不脱离文档流 -
display: inline-block若仅用于让块级元素并排，也得删；它和 Flex 容器共存时易引发基线对齐异常 -
zoom: 1或*zoom: 1是 IE6/7 的 BFC hack，Flex 容器天然创建 BFC，留着反而可能触发 IE11 的怪异盒模型 - 曾用
overflow: hidden清除浮动？现在要删——它会截断 Flex 子项的伸缩行为，尤其在align-items: stretch下导致内容被裁剪
Flex容器该设在哪一层
设错层级是重构后视觉撕裂的主因。不是“最外层 div 加 display: flex”，而是找 HTML 中实际承担“一行内排多个块”的那个父容器。
- 典型结构：
<div class="row"><div class="col"></div><div class="col"></div></div>→ 给.row加display: flex - 若原布局有“浮动标题 + 浮动正文”，它们属于不同逻辑行，应分属两个独立 Flex 容器，不能塞进同一个
.wrapper - 给
body或全局.container加 Flex，会导致导航、页脚等模块被强行纳入同一弹性流，margin 折叠异常、垂直居中失效等问题集中爆发
如何映射 float: left/right 的对齐语义
Flex 不是浮动的镜像替代，而是用新逻辑实现类似效果。硬套“float 左→justify-content 左”会出错，关键在理解控制维度。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 单行左右分栏（如 logo + nav）：用
justify-content: space-between，不是justify-content: flex-start - 右对齐按钮组：用
margin-left: auto推到最后，比float: right更可靠，且不脱离文档流 - 等宽多列（如三列新闻卡）：子项设
flex: 1或flex-basis: 33.33%，别再写width: 33.33%; float: left - 图文环绕场景（
<img>在段落中左浮）：保留float，但只作用于<img>自身，绝不能加在 Flex item 上——Flex item 内部后代才可浮动
IE10/11 和移动端兼容性要点
现代浏览器基本无压力，但老版本仍有细节差异，尤其在行为一致性上。
- IE10/11 需加
-ms-前缀：display: -ms-flexbox、-ms-flex-pack: justify；但flex-wrap: wrap在 IE10 下会被忽略，必须降级为媒体查询 +display: block - iOS Safari 8 及更早不支持
flex-wrap，若需兼容，得用@supports (flex-wrap: wrap)包裹 Flex 代码 - 安卓 WebView 4.3 可能忽略
flex: 1，建议显式写flex: 1 1 auto，并配合min-width: 0防止文字溢出 - 微信 7.0.20 以下对
align-self支持不稳定，优先用容器级align-items，避免单个子项设align-self: center
真正卡住的往往不是语法转换，而是那些藏在 JS 里的依赖——比如用 offsetTop 计算浮动元素位置的逻辑，或通过 getBoundingClientRect() 判断是否换行的判断条件，这些都得同步改。
