float: right 不能真正反转书写顺序，因为仅改变视觉位置而不改变DOM顺序，导致可访问性、选择器和逻辑行为仍按原始HTML顺序执行。
float: right 连续浮动为什么不能真正反转书写顺序
连续使用 float: right 看起来元素从右往左排列，但实际文档流顺序没变——DOM 顺序仍是左→右，只是视觉上被“挤”到了右边。这意味着：屏幕阅读器仍按原始 HTML 顺序读取，tabindex 切换顺序不变，CSS 选择器如 :first-child 也指向最左边的元素（即 HTML 中第一个），而非视觉上最右的那个。
常见错误现象：float: right 套多个块级元素后，想用 :nth-child(1) 选中视觉最右项，结果选中了 HTML 第一个、视觉最左的元素。
- 使用场景仅限纯视觉对齐，不涉及语义、可访问性或逻辑依赖顺序
- 浮动元素脱离文档流，后续非浮动内容会“上浮”填充，容易导致布局塌陷
- 现代布局中，它不是反转顺序的可靠手段，而是视觉错位的临时补丁
真正反转渲染顺序该用什么替代 float
要让 DOM 顺序和视觉顺序一致地从右向左，必须改写渲染流本身，而不是靠浮动“推挤”。flexbox 和 grid 是唯二合理选择，且都支持原生反向排列。
-
display: flex+flex-direction: row-reverse：子元素视觉顺序反转，:first-child对应视觉最右，tabindex和读屏器顺序同步更新 -
display: grid+grid-auto-flow: column-reverse或显式grid-column定位，适合更精细控制 - 避免用
direction: rtl模拟反转——它会改变所有内联文本方向、表单光标行为、省略号位置等，副作用远超预期
float: right 连排时的典型塌陷与修复
连续 float: right 的父容器常高度坍缩为 0，因为浮动元素已脱离文档流。这不是 bug，是浮动机制的设计结果。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：给父容器设固定
height—— 响应式下极易错位 - 推荐修复：
overflow: hidden或overflow: auto（触发 BFC），轻量且兼容到 IE6 - 更现代方案：父容器改用
display: flex，天然包含子项，无需清浮动 - 注意：
clear: both放在浮动后元素上只能防止后续内容上浮，不解决父容器塌陷
IE8–IE11 下 float 反向排版的现实约束
如果必须兼容 IE8–IE11 且不能用 flexbox（IE10+ 才部分支持），float: right 是唯一选项，但需接受其根本缺陷。
- DOM 顺序无法绕过：想用 JS 获取“视觉第一个”元素，得手动
Array.from(parent.children).reverse()[0] - 响应式断点里，
float在小屏下容易换行错乱，需配合width+min-width严格控制 - 不要混用
float和flex在同一容器——IE11 对混合布局解析极不稳定，可能直接忽略部分样式
真正难的不是让元素看起来从右往左，而是让整个链路——HTML 结构、CSS 渲染、JS 逻辑、辅助技术——都认同这个“左→右”的 DOM 顺序其实是“右→左”的意图。这点上，float 从一开始就没打算参与。
