flexbox能替代绝大多数float布局，但需显式清空子元素float、设置flex-wrap:wrap实现换行、用justify-content/align-items统一控制对齐；否则易导致错位、溢出或对齐失效。
Flexbox 能替代绝大多数 float 布局，但不是“加个 display: flex 就完事”——关键在于清浮动、设换行、调对齐，三步漏一就出视觉错位。
为什么 float 子元素必须显式写 float: none
浏览器解析顺序是：先处理 float，再应用 flex 规则。如果子元素还留着 float: left，它会先脱离文档流，再被 flex 容器尝试排列，结果不可控（比如项堆在左上角、宽度崩掉、justify-content 失效）。
- 不能依赖继承或父容器重置——
float不继承，必须每个子选择器单独写float: none - 老代码里常见
.nav-item { float: left; }，迁移时得批量替换成.nav-item { float: none; } - 检查 DevTools 的 Computed 面板，确认
float值确实是none，而不是left或right
flex-wrap: wrap 是多行布局的开关，不是可选项
float 天然换行，但 flex 默认 flex-wrap: nowrap —— 所有子项强行挤在一行，小屏直接溢出，滚动条突兀出现，用户根本看不到后面内容。
- 卡片列表、按钮组、响应式侧边栏等场景，必须主动加
flex-wrap: wrap - 只设
flex-wrap: wrap不够，还得配合gap或margin控制间距；gap在 IE11 及更早版本不支持，需降级用margin - 若要第一行在下方（如倒序时间线），用
flex-wrap: wrap-reverse，不是flex-direction: column-reverse
justify-content 和 align-items 替代了 float 的“推挤逻辑”
float 本质是单个元素“推”其他内容，而 flex 是容器统一调度所有子项。直接套用 float: left 的视觉效果，得靠主轴/侧轴对齐组合实现。
- 横向导航栏想让菜单项左对齐+均分间隙？用
justify-content: space-between，别再算margin-left或calc() - 图标+文字垂直居中？父容器加
display: flex; align-items: center;，比vertical-align: middle+line-heighthack 稳定得多 - 两栏布局（左侧 220px，右侧自适应）：
.sidebar { width: 220px; }+.main { flex: 1; }，无需float+overflow: hidden补丁
最容易被忽略的是兼容性断层：IE10/11 需补 -ms-flex: 1，而 display: flow-root 这类轻量 BFC 方案在 IE 中完全无效；真要保 IE8–9，就别碰 flex，老老实实用 ::after 清浮动更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
