aside标签本身不产生侧边栏效果，其语义仅表示内容附属关系，视觉布局需由CSS（如flex或grid）实现，且必须兼顾响应式与可访问性。
aside 标签本身不产生侧边栏效果
写了 aside，内容却还在主文下方？不是你写错了，是它根本没这个功能。浏览器只把 aside 当普通块级元素处理：默认 display: block、width: 100%、垂直流式排列。所谓“侧边栏”，纯靠 CSS 控制视觉位置。语义和布局必须分开理解——aside 回答的是“这段内容跟谁有关、能不能删”，而不是“它该出现在哪”。
aside 嵌套位置决定语义范围，不能乱放
把 aside 放在哪，直接决定它服务的对象：
- 嵌套在
article内 → 只属于这篇文章，比如某篇教程旁的「兼容性备注」或「术语解释」 - 与
main并列、同为body的直接子元素 → 全站级辅助内容，如右侧热门文章列表、分类导航 - 禁止塞进
header、footer、nav或main内部——HTML5 规范明确不支持
判断是否该用 aside 的唯一标准：删掉整个 aside 后，主内容是否仍能独立表达完整意思？如果不能，那它就不是“附属”，而是核心信息，不该用 aside。
让 aside 真正靠边，优先用 flex 或 grid
float: right 在现代项目里已成隐患：容易导致父容器塌陷、文字绕行进侧栏、响应式难控制，且 IE11 已淘汰。推荐方案：
立即学习“前端免费学习笔记（深入）”；
-
Flex 布局：父容器（如
body或包裹main和aside的div）设display: flex和gap；aside设flex: 0 0 280px；main设flex: 1 -
Grid 布局：父容器设
grid-template-columns: 1fr 280px；main用grid-column: 1；aside用grid-column: 2 - 必须显式设宽度（
flex-basis、width或grid-column中的列宽），否则窄屏下可能撑破容器
小屏下 aside 必须自然下移，禁用 display: none
响应式不是可选项，而是必做项：
- 小屏（如
@media (max-width: 768px)）下，aside应设为display: block并加margin-top，让它自然流到主内容下方 - 绝不能用
display: none隐藏——这等于告诉读屏器和搜索引擎：“这内容不存在”，尤其当里面是法律声明、版权归属或关键提示时，隐藏 = 删除 - DOM 顺序必须与视觉顺序一致：若用 flex 把
aside视觉上放在右侧，但 HTML 中它写在main前面，就得用order调整，否则键盘焦点流和读屏器播报顺序会错乱
最常被忽略的点是：语义绑定不可跨层级，一个 aside 放在 article 里，就只服务这一篇；想复用？得复制，不能靠 JS 搬运 DOM——语义边界是刚性的。
