CSS Flexbox替代float时如何保持旧版样式

必须立刻删掉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 渲染，不是“覆盖不了”，而是浏览器根本无视它们——但副作用仍在：错位、高度异常、基线对齐崩坏。

1. float: left 和 float: right 在 Flex 容器中完全失效，删掉是唯一选择
2. clear: both 没有意义：Flex 子项不脱离文档流，无需清除
3. overflow: hidden 若曾用来清浮动，现在要删——它会裁剪 align-items: stretch 下拉伸的内容
4. zoom: 1 是 IE6/7 的 BFC hack，Flex 容器天然创建 BFC，留着反而可能触发 IE11 的盒模型 bug
5. display: inline-block 若仅用于让块级元素并排（非图文绕排），也得删；和 Flex 共存时易引发基线对齐问题

Flex容器该设在哪一层

设错层级是重构后视觉撕裂的主因。关键不是“加了 display: flex 就行”，而是找对那个语义上的“行容器”——即原浮动项的直接父级。

1. 典型结构：<div class="row"><div class="col"></div><div class="col"></div></div> → 给 .row 加 display: flex
2. 如果原布局有“浮动标题 + 浮动正文”，它们属于不同逻辑行，应分属两个独立 Flex 容器，不能塞进同一个 .wrapper
3. 别给 body 或全局 .container 加 display: flex：导航、页脚会被强行纳入同一弹性流，margin 折叠异常、垂直居中失效等问题集中爆发

如何映射 float:left/right 的对齐意图

Flex 不是浮动的镜像替代，硬套“float 左 → justify-content 左”会出错。关键是理解控制维度：主轴 = flex-direction 的方向。

1. 横向排列（flex-direction: row）→ justify-content 控制左右，align-items 控制上下
2. 纵向排列（flex-direction: column）→ justify-content 控制上下，align-items 控制左右
3. 右对齐不用 float: right，改用 margin-left: auto 更可靠
4. 等宽多栏别写 width: 33.333%，改用 flex: 1 或 flex: 0 0 33.333%

图文环绕等语义场景为何不能删float

Flex 控制的是结构层级分布（如导航栏、面板并列），而浮动适合内容层级排版（如段落中一张图左浮、文字环绕）。只要浮动元素不是 Flex 容器的直接子元素，它就能正常工作。

1. 新闻详情页主体区域用 Flex 划分标题/作者/正文区块，正文段落里的 <img> 仍可设 float: left，配合 margin 做图文混排
2. 确保浮动元素嵌套再深一层，比如 .panel > .content > img，而非 .panel > img
3. 如果浮动导致父容器（如 .content）高度塌陷，就在该父容器上加 ::after 清除或设 display: flow-root，别用 overflow: hidden

真正难的不是把 float 换成 flex，而是判断哪一层该换、哪一层该留——尤其是当浮动出现在文本流内部时，它的语义不可替代，强行替换反而破坏可读性和渲染稳定性。