浮动布局不支持无障碍阅读，因其导致DOM顺序与视觉顺序分离，屏幕阅读器、Tab键焦点等均按源码顺序执行；应改用Flex布局保持语义顺序一致。
浮动布局本身不支持无障碍阅读，问题不在 float 属性，而在它放大了 DOM 顺序与视觉顺序分离的风险——屏幕阅读器、键盘 Tab 流、爬虫都只认源码顺序，不认 float 推出来的位置。
为什么 float:right 让屏幕阅读器“读错顺序”
多个 div 都设 float: right 时，浏览器按 HTML 出现顺序把它们一个个往右推：后写的元素先占最右，先写的被挤到左边。结果视觉上是「C B A」，但 DOM 和阅读器实际读的是「A B C」。
-
:first-child、tabindex、焦点流全按原始 HTML 走，和你看到的完全对不上 - 导航栏里用
float: right排右侧按钮，屏幕阅读器会先把 logo（左侧）读完，再跳到末尾读“登录”，中间跳过所有主菜单项 - 禁用 CSS 后页面乱序，就是无障碍失效的明确信号
别调 direction: rtl 或倒写 HTML 来“骗”顺序
有人用 direction: rtl + float: left 反转排列，或把 <nav> 写在 <main> 后面再靠 float 挪上来——这两者都会破坏语义：
-
direction: rtl会反转所有内联文本方向、省略号位置、光标行为，副作用远超预期 - HTML 倒写让 JS 动态插入新菜单项时逻辑错乱，
aria-labelledby关联失效，Lighthouse 的 “Logical tab order” 审计直接报错 - SEO 工具（如 Screaming Frog）解析源码时，仍把倒写的侧边栏当首页首块内容处理
真正有效的修复方式：用 Flex 替换 float，保留原 HTML 顺序
父容器加 display: flex，子元素保持语义化书写顺序，用 justify-content 或 order 控制视觉位置——这样 DOM、视觉、焦点、阅读器四者一致。
立即学习“前端免费学习笔记（深入）”；
- 右对齐导航：去掉所有子项的
float: right，父容器设display: flex; justify-content: flex-end - 小屏交换主次区域：桌面端
.sidebar { order: 2; }，小屏断点里改.sidebar { order: 0; }，<main>不动 - 务必移除旧
clear: both和overflow: hidden，它们对 Flex 无意义，还可能干扰渲染
验证是否真修复了无障碍问题
不能只看页面长得对不对，得回归源码和交互链路：
- 右键 → “查看网页源代码”，确认
<main>是<body>下第二级（<header>之后）且<h1>在其内部最前 - 关掉 CSS，检查结构是否仍线性可读；用键盘 Tab 测试焦点是否按预期顺序落在按钮、链接上
- 在 Chrome DevTools 的 Accessibility 面板中，展开 “Accessibility Tree”，确认节点顺序和 DOM 一致
最容易被忽略的，是团队花一整天调 float 的 margin 和 width，却从不打开源代码确认 <main> 是否真的前置——源码顺序一旦定型，后续所有 CSS 都只是在掩盖问题，而不是解决问题。
