必须删除所有float、clear、overflow:hidden、zoom:1及仅用于并排的inline-block，只为包裹浮动项的直接父容器设display:flex；设错层级或残留浮动声明会导致错位、塌陷或对齐异常。
直接删掉所有 float、clear、overflow: hidden、zoom: 1 和仅用于并排的 display: inline-block，再给**包裹浮动项的直接父容器**加 display: flex——不是全局容器，也不是子元素自己加。其他“微调”都是次要的，清理不干净才是多数人卡住的根本原因。
必须立刻删除的浮动相关声明
残留的 float 或清除 hack 会干扰 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 左”会出错。关键是理解控制维度：
立即学习“前端免费学习笔记（深入）”；
- 横向排列（
flex-direction: row）→justify-content控制左右，align-items控制上下 - 纵向排列（
flex-direction: column）→justify-content控制上下，align-items控制左右 - 右对齐按钮？用
margin-left: auto替代float: right，更稳定且不依赖主轴方向 - 旧布局用了
width: 33.333%配合float？现在可改用flex: 1或flex: 0 0 33.333%，避免与gap冲突
容易被忽略的兼容性与混合陷阱
Flex 容器里 float 失效是规范行为，不是 bug，但实际迁移中常被忽略：
- 忘了加
flex-wrap: wrap，小屏下子项溢出容器，误以为 “flex 不换行” - 子项写了
width: 33.33%还留margin-right，和flex: 1冲突导致宽度计算错乱 - 图文混排时没调
align-items: flex-start，图片被拉伸、文字基线飘移 - Flex 容器前面有遗留的浮动元素（如旧版
.nav { float: left; }），会导致该 Flex 容器被“卡”在浮动下方，需在它自身加clear: both或用伪元素清除
