float:right并非真正反转顺序，而是按HTML文档流逐个右贴导致视觉倒序，DOM、可访问性及JS顺序均保持不变；应改用display:flex+justify-content:flex-end实现右对齐。
这不是“顺序相反”，而是 float: right 按 HTML 文档流顺序逐个右贴，先处理的元素占最右，后处理的只能往左挤——视觉上看起来像倒序，但 DOM、可访问性、JS 获取顺序全没变。
float: right 的堆叠逻辑不是重排，是右推
浏览器渲染时，对每个设置了 float: right 的元素，都按 HTML 出现顺序依次执行“贴右”动作：
- 第一个元素 → 贴到父容器最右边
- 第二个元素 → 发现右边已被占，就贴在第一个元素左边
- 第三个元素 → 再往左挤……
结果视觉上从左到右看到的是 C-B-A（假设 HTML 是 A-B-C），但 document.querySelector('div:first-child') 仍返回 A，tabindex="1" 仍聚焦 A，屏幕阅读器仍读 A→B→C。
为什么改 HTML 顺序（比如写成 C-B-A）不是解法
表面看加了 float: right 后视觉变回 A-B-C，但代价严重：
立即学习“前端免费学习笔记（深入）”；
-
<input type="radio">组的焦点顺序和视觉排列分裂，键盘导航跳转错位 - 下拉菜单依赖
getBoundingClientRect()定位，DOM 倒序后坐标全乱 - 服务端渲染（SSR）输出的 HTML 与客户端视觉不一致，结构化数据可能失效
- JS 动态插入新项时，必须用
prepend()才能保持视觉末尾，维护成本陡增
现代浏览器该用 flex 替代，两行 CSS 解决根源
Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+ 全支持 Flexbox，直接替换更干净：
- 移除所有子元素上的
float: right - 父容器加
display: flex和justify-content: flex-end→ 视觉右对齐，DOM 顺序不变 - 若真需视觉逆序（比如列表最后一项显示在最右），用
flex-direction: row-reverse→ 此时:first-child自动指向视觉最右项
注意：float 和 flex 混用在同一容器里，IE11 可能直接忽略部分样式，别试。
如果真要兼容 IE8–IE9，得接受它本质不可修复
仅限无法升级构建链、且确认必须支持 IE8–IE9 的遗留项目：
- 保留原始 HTML 顺序，不倒写
- 用 JS 加载后重排节点：
Array.from(parent.children).reverse().forEach(el => parent.appendChild(el)) - 父容器必须触发 BFC：
overflow: hidden或display: table，否则高度坍缩为 0 - 所有浮动子项统一用
float: right，禁用float: left混用
这种 JS 补丁只解决视觉，不修复可访问性，且 SSR/SSG 场景下 HTML 与客户端渲染仍不一致——这是权衡，不是解法。
