aside标签仅表语义不控显隐，显隐由CSS/JS实现且须兼顾无障碍；小屏禁用display:none，应保留在DOM中用visibility+position或aria-hidden+inert隐藏；移动端宜自然下移而非隐藏，推荐Flex/Grid布局替代float。
小屏下别用 display: none 隐藏 aside
这是最常见也最危险的做法。display: none 不仅让元素看不见，还会把它从可访问树中彻底移除：读屏器用户听不到“这里有个侧边栏”，键盘焦点跳过它，搜索引擎也当它不存在。
正确方式是让它保留在 DOM 中，只是视觉上移出屏幕：
- 用 visibility: hidden + position: absolute + left: -9999px（保留占位但不可见）
- 或用 aria-hidden="true" + inert（禁用交互且告知辅助技术）
- 再配合 transform: translateX(-100%) + opacity: 0 实现平滑收起动画
移动端应自然下移，而非强行隐藏
小屏时，aside 不该消失，而应顺其自然流到 main 下方——这既符合语义（辅助内容仍在），又避免焦点丢失、FOUC（闪屏）等问题。
关键写法示例：
- 桌面端：display: grid; grid-template-columns: 1fr 280px;
- 小屏断点（如 max-width: 768px）：grid-template-columns: 1fr; aside { order: -1; margin-top: 1.5rem; }，把 aside 提到顶部或紧跟 main 后
- 初始 HTML 就带 hidden 属性，再用媒体查询在桌面端取消：
@media (min-width: 768px) { aside[hidden] { display: block; } }
折叠按钮必须语义化绑定
如果用了“展开/收起”按钮，不能只靠视觉提示。它必须真实控制 aside 的状态，并向辅助技术明确传达：
- 按钮需有 aria-expanded="true/false"，值随 aside 显隐同步更新
- 按钮需用 aria-controls="aside-id" 指向目标 aside 元素
- JS 监听 resize 事件时，必须手动同步 aria-expanded 和 inert 状态，不能只靠 CSS 媒体查询
- 点击收起后，要主动将焦点移回触发按钮或 main 区域起始处，防止键盘用户卡住
布局别依赖 float，优先用 Flex 或 Grid
aside 是语义容器，不是布局工具。float 容易引发塌陷、脱离文档流、响应式重置困难等问题。
现代方案更可靠：
-
Flex 布局：父容器
display: flex，aside 设flex: 0 0 280px，main 设flex: 1 -
Grid 布局：父容器
display: grid; grid-template-columns: minmax(280px, 3fr) minmax(240px, 1fr)，再用grid-column分配位置 - 小屏切换时，只改父容器的 grid-template-columns 和 aside 的 order，不动 DOM 结构
