浮动本身不改变读屏顺序，但配合非语义化HTML会导致屏幕阅读器朗读逻辑与视觉错位；应优先使用语义化标签（如、）并确保其DOM顺序合理，或改用Flex/Grid布局。
有影响，而且是结构性影响——浮动本身不改变读屏顺序，但配合非语义化 HTML 使用时，会直接导致屏幕阅读器朗读逻辑与视觉呈现错位。
float 不改 DOM 顺序，但常被用来“骗眼睛”
float 只是让元素脱离文档流、向左或右偏移，它不会修改 HTML 源码顺序。屏幕阅读器（NVDA、VoiceOver）严格按 DOM 顺序朗读，哪怕你用 float: right 把侧边栏视觉上放到右边，只要它在 HTML 里写在主内容前面，读屏器就会先读侧边栏、再读正文。
- 常见错误：用
<div class="sidebar"> + <code><div class="main"> 配合 float 实现两栏，但 HTML 中 <code>sidebar在main前面 - 后果：盲人用户听到的是“最新广告 → 文章标题 → 正文”，完全违背内容主次
- 解决方向不是“怎么让 float 改读屏顺序”，而是“让 HTML 顺序本身就对”
-
<main></main>会被 VoiceOver 识别为 “main landmark”，用户可快捷跳转 -
<aside></aside>会被标记为 “complementary landmark”，读屏器可能加前缀提示“附注” - 必须确保
<main></main>在 HTML 中物理位置靠前，哪怕视觉上它被 float 到中间 - 不要嵌套语义冲突：比如在
<nav></nav>里再套一个<main></main> - 错误写法：
<div class="clearfix">...</div>—— 屏幕阅读器看到的是无意义的 div - 推荐写法：
<section class="article-grid">...</section>，再用clearfix类清除内部 float - 避免用
display: contents包裹浮动容器：它会让整个<section></section>从可访问性树中消失，子元素变成孤儿节点 - 如果清除浮动后父容器高度塌陷，别用
height: 1px强撑——这会让读屏器误判内容高度，改用min-height或真实内容占位
用 <aside></aside> 和 <main></main> 替换 <div> 能立刻改善可访问性
<p>HTML5 语义标签本身不带样式，但它们向辅助技术明确表达了角色：<code><main></main> 是页面核心内容，<aside></aside> 是附属信息。即使仍用 float 布局，屏幕阅读器也能结合这些标签做上下文判断。
清除浮动的写法也影响可访问性树
用 overflow: hidden 或伪元素 ::after 清除浮动时，若父容器本身没语义，就只是个空壳；但若把它改成 <section></section> 或 <article></article>，就能补全结构层次。
立即学习“前端免费学习笔记（深入）”；
真正卡住无障碍落地的，往往不是 float 本身，而是把 float 当成布局唯一解、从而放弃语义结构。现代项目中，优先用 display: grid 或 display: flex 配合语义标签，既能免去清除浮动的麻烦，又能天然保持 DOM 与视觉一致——这点对键盘用户 Tab 顺序和读屏逻辑都更可靠。
