float: right 的“顺序颠倒”是视觉错位而非真实重排，DOM 顺序、可访问性及 JS 行为均保持原始左→右；现代应优先用 display: flex + justify-content: flex-end 替代。
float: right 的“顺序颠倒”其实是堆叠方向问题
不是 CSS 主动反转了顺序，而是浏览器按 HTML 文档流顺序，逐个把 float: right 元素往父容器右边界“推”：第一个元素贴最右，第二个只能挤在它左边，第三个再左……结果视觉上从右往左排列，但 DOM 顺序仍是原始的左→右。
这意味着：:first-child 依然选中 HTML 第一个元素（视觉上最左），屏幕阅读器仍按原始顺序读取，tabindex 切换路径也完全没变——你看到的“颠倒”，只是视觉错位，不是真实重排。
为什么不能靠改 HTML 顺序来“修复”？
把 <li>C</li>
<li>B</li>
<li>A</li> 写成 A-B-C 再全加 float: right，虽然视觉上看起来对了，但语义和可访问性立刻崩坏：
- SEO 抓取的 HTML 结构与用户所见不一致，结构化数据可能失效
- 下拉菜单依赖
offsetTop或getBoundingClientRect()定位，DOM 倒序后坐标全乱 -
<input type="radio">组的焦点顺序和视觉排列分裂，键盘导航错位 - JS 动态插入新项时，必须用
prepend()才能保持视觉末尾，维护成本陡增
现代解法：两行 CSS 替掉 float: right
所有主流浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）都原生支持 Flexbox，直接替换更干净：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
父容器加：display: flex + justify-content: flex-end，子元素保持原始 HTML 顺序，移除全部 float: right —— 视觉右对齐，DOM 顺序、可访问性、JS 操作全部同步。
如果真需要视觉逆序（比如列表末尾项显示在最右），用：flex-direction: row-reverse，此时 :first-child 和 tabindex=1 自动指向视觉最右项，无需任何 HTML 调整。
如果非得兼容 IE8–IE9 怎么办？
仅限无法升级构建链的遗留项目，且确认必须支持 IE8–IE9：
- 保留原始 HTML 顺序，不倒写
- 用 JS 在加载后重排节点：
Array.from(parent.children).reverse().forEach(el => parent.appendChild(el)) - 父容器必须触发 BFC：
overflow: hidden或display: table，否则高度坍缩为 0 - 禁用
float: left混用，所有浮动子项统一用float: right
注意：这种 JS 补丁只解决视觉，不修复可访问性，且 SSR/SSG 场景下 HTML 与客户端渲染仍不一致——这是权衡，不是解法。
