使用float: right会导致导航项视觉顺序颠倒，因为浏览器从右往左依次放置浮动块，后出现的<li>挤占右侧位置，先出现的被推至左侧；而justify-content: flex-end在主轴统一分配空间，保持HTML源码顺序。
float: right 为什么让导航项视觉顺序颠倒
因为 float: right 不是“把元素挪到右边”，而是让浏览器**从右往左依次放置浮动块**。HTML 中写在前面的 <li> 先被渲染，但会被后面出现的 <li> “挤”到左边——结果就是 DOM 顺序不变，视觉顺序完全反转。
flex-end 能保持顺序的根本原因
Flexbox 的 justify-content: flex-end 是在**主轴（水平方向）上统一分配剩余空间**，所有子项仍按 HTML 源码顺序排列，只是整体向右“靠齐”。它不依赖文档流脱离或逐个推挤，而是布局容器主动控制对齐逻辑。
- 必须把父
<ul>设为display: flex，不能只改<li> - 要移除所有
float: right声明，否则会干扰 flex 排列（浮动与 flex 不兼容） -
flex-direction: row（默认值）确保横向排列，无需额外处理
用 float: right 时最容易踩的三个坑
即使坚持用浮动，也常因以下细节导致错位或反转：
- 多个
<li>同时float: right：越靠后的元素越靠右，顺序必然翻转 - 父容器没触发 BFC（如缺少
display: flow-root或overflow: hidden）：高度塌陷后，后续内容上浮，进一步扰乱视觉位置 - 没重置
box-sizing和margin：默认content-box+ 浏览器 UA margin 可能导致总宽超限，强制换行再错序
RTL 场景下 float: left 看似“贴右”的真相
在 direction: rtl 容器里写 float: left，元素会出现在右侧——这不是属性变聪明了，而是 left 指的是**当前文本方向的逻辑起点**。LTR 下逻辑左 = 视觉左；RTL 下逻辑左 = 视觉右。所以翻转不是由 float 实现的，而是由 direction 改变了整个块级流的方向基准。
立即学习“前端免费学习笔记（深入）”；
真正需要镜像时，别靠改 float 值硬凑，优先用 flex-direction: row-reverse 或 grid，它们天然响应逻辑方向，且不破坏 DOM 顺序和可访问性。
