必须立刻删掉float、clear、overflow: hidden、zoom: 1和仅用于并排的inline-block；flex容器应设在原浮动项的直接父级；右对齐用margin-left: auto而非float:right；图文环绕等文本流内浮动可保留。
哪些float相关声明必须立刻删掉
残留的 float、clear、overflow: hidden、zoom: 1 和仅用于并排的 display: inline-block 会直接干扰 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容器该设在哪一层
设错层级是重构后视觉撕裂的主因。关键不是“加了 display: 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 的方向。
- 横向排列（
flex-direction: row）→justify-content控制左右，align-items控制上下 - 纵向排列（
flex-direction: column）→justify-content控制上下，align-items控制左右 - 右对齐不用
float: right，改用margin-left: auto更可靠 - 等宽多栏别写
width: 33.333%，改用flex: 1或flex: 0 0 33.333%
图文环绕等语义场景为何不能删float
Flex 控制的是结构层级分布（如导航栏、面板并列），而浮动适合内容层级排版（如段落中一张图左浮、文字环绕）。只要浮动元素**不是 Flex 容器的直接子元素**，它就能正常工作。
- 新闻详情页主体区域用 Flex 划分标题/作者/正文区块，正文段落里的
<img>仍可设float: left，配合margin做图文混排 - 确保浮动元素嵌套再深一层，比如
.panel > .content > img，而非.panel > img - 如果浮动导致父容器（如
.content）高度塌陷，就在该父容器上加::after清除或设display: flow-root，别用overflow: hidden
真正难的不是把 float 换成 flex，而是判断哪一层该换、哪一层该留——尤其是当浮动出现在文本流内部时，它的语义不可替代，强行替换反而破坏可读性和渲染稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
