float: right 会导致视觉顺序颠倒，因其按html源码顺序从右往左逐个填充空间；正确做法是用 display: flex + justify-content: flex-end 保持dom顺序并实现右对齐。
不能用 float: right 实现右对齐而不反转顺序——它天生就会把后写的元素顶到最右边，视觉上必然逆序。
为什么 float: right 一定导致顺序颠倒
浏览器处理多个 float: right 元素时，是按 HTML 源码顺序“从右往左”逐个塞入可用空间的。比如 <li>Home</li>
<li>About</li>
<li>Contact</li>，Contact 先占最右，About 被挤到它左边，Home 再往左——结果就是 Contact → About → Home 的显示顺序。
这不是 bug，是 float 的规范行为。你没法靠加 clear、改 margin 或调换 HTML 顺序来“修好”，因为语义和视觉已经割裂。
用 display: flex + justify-content: flex-end 替代
这是唯一既保持 DOM 顺序、又实现右对齐的可靠方式：
- 给包裹菜单的容器（如
<ul></ul>或<nav></nav>）设display: flex和justify-content: flex-end - 确保所有菜单项（
<li>）是它的直接子元素 - 移除所有
float: right声明——它和 flex 不兼容，会干扰排列 - 若需间距，优先用
gap，比margin更稳定（尤其在换行时）
响应式下要交换左右位置怎么办
比如桌面端 Logo 左、菜单右；小屏时想让菜单在 Logo 上方——别碰 float，用 order：
- 父容器设
display: flex; flex-direction: column; - Logo 元素设
order: 0，菜单设order: 1（默认值，可不写） - 在
@media (max-width: 768px)里把 Logo 改成order: 1，菜单改成order: 0 - 注意：只对 flex 直接子元素生效；DOM 顺序不变，但屏幕阅读器仍按原始 HTML 读取
真正麻烦的点不在写法，而在团队协作时有人偷偷加回 float: right——它不会报错，但会在某次合并后突然让菜单逆序，且难以定位。上线前用开发者工具检查 computed styles 里的 display 和 float 值，比等用户反馈快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
