Flex子项上float无效是规范强制行为，浏览器将其计算值设为none；应改用justify-content、margin-left:auto等Flex原生属性实现对齐，或用wrapper隔离浮动。
float元素和flex子项不能混用——不是“乱序”，而是根本不在同一套布局机制里运行。浏览器会直接忽略flex容器内子项的float声明，你看到的“错位”或“顺序异常”，其实是DOM结构、flex主轴方向、justify-content和margin共同作用的结果，不是浮动在起效。
为什么flex容器里的float:right看起来像倒序？
因为float: right根本没生效。你看到的所谓“右对齐”或“从右往左排”，其实是flex默认flex-direction: row下，justify-content: flex-end或margin-left: auto造成的视觉效果。DevTools里查float的computed值，一定是none或not applicable。
- 写
float: right却没反应？先检查父容器是不是display: flex - 多个按钮加了
float: right，结果最前面那个跑最右？那是DOM顺序+margin-left: auto在起作用，不是浮动堆叠 - 用
::first-child选中不到“视觉最右”的元素？因为DOM顺序没变，只是flex把它推过去了
想让flex容器内子项右对齐，该用什么？
别碰float，它只会干扰调试。正确方式取决于你要的效果：
- 单个按钮右对齐 → 给它加
margin-left: auto - 头部左logo + 右菜单 → 父容器设
justify-content: space-between - 多个按钮等距分布 → 用
justify-content: space-around或gap: 12px - 需要视觉顺序和DOM顺序都从右到左 → 改
flex-direction: row-reverse，不用动HTML
老代码里必须保留float，怎么塞进flex布局不崩？
不能把float元素直接当flex子项。必须用一层普通容器把它“包住”，再把这个wrapper放进flex上下文：
立即学习“前端免费学习笔记（深入）”；
- 新增一个
<div class="float-wrapper"></div>，把原float元素放进去 - 给wrapper加
display: flow-root（推荐）或overflow: hidden，让它形成独立BFC - 把这个wrapper和其它内容一起作为子项放进flex容器
- 绝对不要用
display: contents透传——IE全挂，且可能破坏盒模型计算
最容易被忽略的一点：问题往往不出现在flex子项上，而在于flex容器自身是否处于一个未清除的浮动上下文中。比如它前面有个float: left侧边栏但没clear，那整个flex区域都会被挤偏——这时候修的不是子项，是它的兄弟元素。
