float:right 的视觉右对齐是堆叠而非 DOM 重排，DOM 顺序仍为原始左→右；现代应改用 display: flex + justify-content: flex-end 以保持语义、可访问性与 JS 行为一致。
float:right 的“顺序颠倒”是视觉堆叠，不是 DOM 重排
浏览器按 HTML 文档流顺序，逐个把 float: right 元素往父容器右边界“推”：第一个元素贴最右，第二个只能挤在它左边，第三个再左……结果视觉上从右往左排列，但 DOM 顺序仍是原始的左→右。
这意味着：
-
::first-child依然选中 HTML 第一个元素（视觉上最左） - 屏幕阅读器、
tabindex切换、JS 的querySelector都按原始顺序工作 -
getBoundingClientRect()返回的坐标与 DOM 顺序一致，和你看到的不匹配
为什么不能靠改 HTML 顺序来“修复”？
把 CBA 写成 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，直接替换更干净：
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex+justify-content: flex-end，子元素保持原始 HTML 顺序，移除全部float: right - 视觉右对齐，DOM 顺序、可访问性、JS 操作全部同步
- 如果真需要视觉逆序（比如列表末尾项显示在最右），用
flex-direction: row-reverse，此时:first-child和tabindex=1自动指向视觉最右项
浮动布局里最容易被忽略的兼容性陷阱
哪怕你坚持用 float，也得注意这些细节才不会在响应式断点里突然崩：
-
box-sizing: border-box必须显式设置，否则padding/border会撑大实际宽度，导致小屏下“掉队” - HTML 中浮动元素之间不能有换行或空格，否则渲染器可能插入约 4px 间隙
- 父容器高度塌陷不是“bug”，而是 float 脱离文档流的必然结果；用
display: flow-root最安全，overflow: hidden可能意外裁剪弹窗 - 计数器（
counter-increment）严格按 DOM 顺序触发，浮动后序号错乱是常态，别指望它自动对齐视觉
