Flex容器中子元素的float属性必然失效，因CSS规范强制将其计算值设为none，需显式重置float:none并改用justify-content、gap等flex属性替代。
Flex 能直接解决 float 带来的对齐混乱，但不是删掉 float 就完事——关键在重置、轴向控制和换行逻辑。
为什么直接加 display: flex 后布局还错乱
老代码里残留的 float 会优先于 flex 规则生效，浏览器先处理浮动再套 flex，结果不可控。子元素上没清掉 float，哪怕父容器已是 display: flex，也会出现错位、挤堆或部分不响应 justify-content。
- 必须显式写
float: none到所有子元素（不能只靠继承或父级覆盖） -
clear属性在 flex 容器里完全失效，留着纯属冗余 - 原来靠
margin模拟间距的写法要删掉，改用gap或justify-content
justify-content 和 align-items 怎么选才不翻车
这两个属性分别管主轴和交叉轴对齐，但默认主轴是水平（flex-direction: row），很多人误以为 align-items: center 是“垂直居中”，却忘了如果主轴改成 column，它就变成“水平居中”了。
- 横向排列时：
justify-content控制左右，align-items控制上下 - 纵向排列时：
justify-content控制上下，align-items控制左右 -
space-between两端对齐，但项目之间无边距；space-evenly才真均分所有间隙（IE 不支持）
小屏溢出、文字环绕、IE8–9 这些坑怎么绕
Flex 默认 flex-wrap: nowrap，子项强行挤在一行，手机上看直接横向滚动。而 float 天然换行，这点不能忽略。
立即学习“前端免费学习笔记（深入）”；
- 需要换行必须显式加
flex-wrap: wrap，否则宽度不够时内容被压缩甚至隐藏 - 图文环绕场景（如正文内图片左浮、文字绕排）——
float目前仍是唯一原生支持方案，flex 无法替代 - 要兼容 IE10/11，
flex: 1得补-ms-flex: 1；IE8–9 则根本不能用 flex，得保留 float +::after清除
比 Flex 更轻量的 BFC 替代方案：display: flow-root
如果目标只是解决父容器高度塌陷，又不想改整个布局逻辑，display: flow-root 比 flex 更精准：它只创建 BFC，不改变子项排列方式，也不裁剪 tooltip 或下拉菜单。
- 它和
display: flex互斥，不能共存 - IE11 及更早版本不支持，需用
@supports (display: flow-root) { ... }包裹降级 - 若父容器已有
contain: layout，可能与flow-root的 BFC 行为冲突，得测实效果
真正难的不是怎么写 flex，而是判断该不该动 float——文字环绕、低版本兼容、HTML 锁死这三类场景，硬切反而引入新 bug。
