必须立刻删除float:left/right、clear:both、display:inline-block（用于并排时）、zoom:1及overflow:hidden（曾用于清除浮动），并在包裹浮动项的直接父级容器上设display:flex，而非全局或子元素设置。
直接删掉所有 float、clear、display: inline-block（仅用于并排时）、zoom: 1 和 overflow: hidden，然后在**包裹浮动项的直接父级容器**上加 display: flex——不是全局加，也不是子元素自己加，更不是为了“看起来像以前”而乱套对齐属性。
哪些旧CSS声明必须立刻删除
残留的浮动相关样式不会被 Flex 忽略，而是会干扰计算逻辑，尤其在 IE11 或旧 Safari 中可能触发意外盒模型或基线错位。
-
float: left和float: right：Flex 项目不脱离文档流，float完全失效，留着反而让某些浏览器尝试解析冲突规则 -
clear: both：Flex 子项天然不换行挤压其他内容，这个声明彻底无意义 -
display: inline-block（仅用于让块级元素横向排列）：和display: flex共存时，容易引发vertical-align干扰和高度不一致，应统一交由 Flex 控制排列 -
zoom: 1或*zoom: 1：IE6/7 的 BFC hack，Flex 容器本身已创建 BFC，保留可能在 IE11 中激活怪异模式 -
overflow: hidden（曾用来清除浮动）：它会裁剪align-items: stretch下拉伸的子项，尤其是图片或带 padding 的卡片
Flex容器该设在哪一层
设错层级是重构后布局撕裂、间距错乱、居中失效的最常见原因。关键不是“哪个 class 名字熟”，而是看 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 不是浮动的 CSS 属性平移，而是用新轴向逻辑实现类似目的。硬套“左浮→justify-content: flex-start”会出问题，重点在于理解主轴与交叉轴的控制维度。
- 单行左右分栏（如 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>在段落中左浮）：保留float，但只作用于<img>自身，且绝不能加在 Flex item 上——Flex item 内部后代才可浮动
IE10/11 和旧 Safari 的兼容性要点
现代浏览器基本无压力，但老版本仍有细节陷阱，尤其在属性简写和默认行为上。
-
flex: 1在 IE10/11 中等价于flex: 1 1 0%，而现代浏览器默认是flex: 1 1 auto；若子项含图片或文字，建议显式写flex: 1 1 auto避免压缩过度 -
gap属性在 IE 完全不支持，需回退到margin；row-gap/column-gap在 Safari 14.1 之前也不支持 -
align-items: center在旧 Safari 中对min-height容器支持不稳定，必要时加min-height: 1px触发渲染 - 避免在 Flex 容器上同时使用
align-items: stretch和图片子项未设height：旧版 Safari 可能拉伸变形
最容易被忽略的是：Flex 容器一旦启用，所有直接子元素自动成为 Flex 项目，其 float、vertical-align、clear 全部失效——这不是 bug，是规范行为。重构时务必检查子元素是否还依赖这些已被废止的布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
