浮动元素的读屏顺序必然与视觉顺序不一致，只能停用float改用flex：因float仅改变渲染位置而不改变dom顺序，屏幕阅读器、tabindex等严格遵循原始html顺序；display:flex+justify-content:flex-end可确保视觉与语义顺序一致。
浮动元素的读屏顺序必然与视觉顺序不一致，无法“检测后修复”，只能停用 float 并换用语义正确的布局方式。
为什么 screen reader 读出来的顺序总是错的
float 不改变 DOM 顺序，只改变渲染位置——浏览器按 HTML 顺序把元素一个个“推”到右/左边缘，后出现的先占边。但屏幕阅读器、tabindex、:first-child 全部严格遵循原始 DOM 顺序，和你看到的完全对不上。这不是 bug，是 float 的设计本质：它本就不是为结构化布局服务的。
- 给
li加float: right，HTML 是 A-B-C，视觉是 C-B-A，读屏器仍读 A→B→C - 用
direction: rtl强行翻转？会同步反转所有内联文本、光标移动、省略号位置，副作用远超预期 - JS 动态插入新项时，必须
prepend()才能保持视觉末尾，维护成本陡增
display: flex + justify-content: flex-end 是唯一可靠解法
Flexbox 天然保持 DOM 顺序与视觉顺序一致，且无需额外清除逻辑。关键前提是：彻底移除所有子元素上的 float 声明（否则会被忽略）。
- 父容器加：
display: flex+justify-content: flex-end→ 视觉右对齐，DOM 顺序不变 - 若需视觉最右 = DOM 最右（比如倒序时间线），改用
flex-direction: row-reverse，此时:first-child和tabindex自动匹配视觉首位 - 含
position: absolute的下拉菜单不受影响，因为绝对定位元素不参与 Flex 布局流
别碰 overflow: hidden 或 clearfix 来“救”读屏顺序
这些方案只解决父容器塌陷，对读屏顺序零作用。更危险的是，它们会让开发者误以为“样式修好了”，继续在错误路径上堆砌补丁。
-
overflow: hidden可能意外裁剪box-shadow、transform位移后的弹窗或 tooltip - 伪元素
.clearfix::after需要content: ""+display: table+clear: both缺一不可，漏掉任一就会失效 - 给浮动元素自己加
clear: both？CSS 规范明确忽略，完全无效
真正容易被忽略的是：无障碍顺序错位只是表象，根源是工具误用
浮动（float）是为图文环绕设计的文本流脱离机制，不是布局模型。拿它做导航栏、卡片列表、响应式栅格，等于用螺丝刀拧螺母——拧得动，但迟早崩刃。现代项目里，display: flex 或 display: grid 一行声明就能接管全部行为，语义、可访问性、响应式、维护性全在线。别花时间“检测错位”，直接换掉 float。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
