float: right 导致导航菜单视觉顺序颠倒不是 bug，而是其固有行为：元素按 HTML 顺序依次右贴，后出现的先占最右位，先出现的被挤左；应改用 display: flex + justify-content: flex-end 替代。
右浮动元素显示顺序颠倒不是 bug，是 float: right 的固有行为：浏览器按 HTML 顺序依次把每个元素“推”到父容器最右侧，后出现的元素先占位，先出现的被挤到左边——视觉上就成了倒序。想让它看起来正常，不能靠调浮动，得换思路。
为什么 float: right 会让导航菜单顺序翻转
典型场景是
- 里几个
- 根本原因是浮动不重排文档流，只改变渲染位置：第一个
<li>贴最右，第二个贴它左边，第三个再左……形成“右对齐堆叠” - DOM 顺序、可访问性顺序、SEO 顺序全保持原样，只有视觉错位
- 如果父容器没清除浮动（比如没设
overflow: hidden或display: flow-root），还可能高度塌陷，让后续内容上浮覆盖 - 父容器（如
<ul></ul>或<nav></nav>）加display: flex和justify-content: flex-end - 子项（
<li>）默认 inline-block 行为消失，自动水平排列，末尾对齐 - 若需等宽或自适应间距，加
flex-wrap: wrap或用gap控制间隙 - IE10+ 支持良好；如需兼容 IE9 及以下，才考虑回退到 float + clearfix
- 如果目标只是“最后一个元素靠右”，只给那个元素设
float: right，其余保持普通流 - 如果真要多个右浮，且必须保持视觉顺序，就把 HTML 顺序反过来写：
<li>Contact</li> <li>About</li> <li>Home</li>—— 这样浮动后反而正序显示 - 务必给父容器触发 BFC：
display: flow-root（推荐）或overflow: hidden，否则高度坍缩会导致布局断裂 - 别混用
float: left和float: right在同一父容器里做对齐——它们不协商位置，中间空隙难控，响应式下极易错位
<li> 全加 float: right，HTML 顺序是 Home → About → Contact，结果页面从左到右显示 Contact → About → Home。
用 flexbox 替代 float 实现右对齐且顺序不变
现代方案一句话：display: flex + justify-content: flex-end，不改 HTML，不颠倒顺序，还不用清浮动。
必须用 float 时怎么避免顺序错乱
仅限维护老项目、图文环绕等少数场景。核心原则：别让多个同向浮动元素挤在同一行竞争位置。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：你花时间调试 clear、margin、overflow，其实是在用一个为文字环绕设计的机制强行做布局。顺序颠倒只是表象，根源是工具选错了。
