必须删除所有float声明——flex容器中float、clear、vertical-align均被规范忽略，改用justify-content/align-items居中更稳定，且自动解决高度塌陷。
直接删掉所有 float 声明——float 和 display: flex 不能共存，不是“调不好”，是浏览器会主动忽略子元素的 float。
flex 容器里 float 属性被完全忽略
CSS 规范明确要求：当父容器设为 display: flex 或 display: grid 时，子元素上的 float、clear、vertical-align 全部失效。浏览器不是“没处理”，而是按标准跳过解析。
- 你在子元素上写
float: left，DevTools 的 computed 样式里根本看不到它生效 -
clear: both在 flex 容器内部加了也白加，不会触发任何清除行为 - 如果旧代码里还混着
float，会导致布局“看似正常但不可控”：比如换行时机飘忽、文字环绕逻辑残留、响应式断点下突然错位
为什么删 float 后居中反而更稳？
因为 justify-content: center 和 align-items: center 的对齐基准是容器的主轴/交叉轴，不依赖子元素是否脱离文档流。而 float 强制脱离文档流，反而让 flex 容器“看不见”子元素的真实尺寸和位置关系。
- 浮动元素高度塌陷问题在 flex 下自动消失——flex 容器天然包含子项
- 不再需要
overflow: hidden或伪元素清除浮动，HTML 更干净 - 子元素宽度变化（如字体缩放、内容增减）时，
justify-content: center仍能实时重算居中位置；而float + margin-left: -50%会立刻偏移
迁移时最容易漏掉的三处
把老浮动结构改成 flex，光改 display 不够，这三处常被忽略：
- 删掉子元素上的
float: left/right、clear: both、display: inline-block（除非你真需要内联行为） - 父容器若原来靠
overflow: hidden清除浮动，现在可以安全删掉——flex 不需要它 - 检查子元素是否写了
margin: auto：在 flex 容器里它可能覆盖justify-content，需明确保留或删除
真正卡住的往往不是语法，而是某层组件库或 CMS 主题悄悄注入了 float 样式，导致你改了父容器却看不出效果——建议用 DevTools 的 “Computed” 面板逐层检查子元素的 float 是否真的被清除了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
