是语义标签而非布局工具，仅表示内容与主文相关但非必需；必须作为 、 或 的直接子元素，删除后主内容须仍逻辑完整。
aside 标签不是“侧边栏容器”，而是语义声明
写 <aside></aside> 不会让内容自动靠右、变窄或悬浮——它只是告诉浏览器和屏幕阅读器：“这段内容跟主文有关，但删掉也不影响主文逻辑完整”。如果你发现 <aside></aside> 里的内容还堆在正文下方，不是标签错了，是还没配 CSS。
常见错误现象包括：
• 把主导航塞进 <aside></aside>，结果读屏器跳过不读
• 在 <header></header> 里硬加 <aside></aside>，违反嵌套规则
• 用 float: right 但没清除浮动，导致父容器塌陷、文字绕行进侧栏
-
<aside></aside>必须作为<article></article>、<section></section>或的直接子元素；不能放在<header></header>、<footer></footer>、<nav></nav>或<main></main>内 - 删除整个
<aside></aside>后，主内容仍需能独立表达完整意思——这是判断是否该用它的唯一标准 - 一个页面可有多个
<aside></aside>，比如文章内一个放作者简介，另一个放术语解释，互不干扰
怎么让 aside 真正“靠边”？只靠 CSS，别信标签位置
<aside></aside> 默认就是普通块级元素，和 <p></p> 行为一致。要让它视觉上出现在右侧（或左侧），必须用现代布局方案控制。
- 推荐用
display: flex：父容器设display: flex; gap: 1.5rem，<aside></aside>设flex: 0 0 280px，<main></main>或<article></article>设flex: 1 - 更灵活选
display: grid：父容器设grid-template-columns: 1fr 280px，再用grid-column: 2指定<aside></aside>占第二列 - 绝对避免
float：易引发塌陷、响应式难处理，且 IE11 以下已基本淘汰 - 必须设宽度（如
width或flex-basis），否则窄屏下可能撑破容器
嵌套位置决定语义范围：article 内 vs body 级
<aside></aside> 放在哪，决定了它“服务谁”。这个位置不是为了排版，而是为了语义绑定。
立即学习“前端免费学习笔记（深入）”；
- 放在
<article></article>内：只对该篇文章有效，比如某篇教程旁的“兼容性备注”或“历史背景卡片” - 放在
下、与<main></main>并列：属于全站级附属内容，如热门文章列表、分类导航、广告位 - 不能跨
<article></article>复用：一个<aside></aside>不能同时服务两篇不同文章——语义边界是刚性的 - 如果内容和当前上下文完全无关（比如食谱页里硬塞天气预报），哪怕加了 class="sidebar"，也不能用
<aside></aside>
响应式与可访问性容易被忽略的细节
样式调通、结构写对只是第一步。真正在意用户体验的项目，会卡在这几个点上：
- 小屏必须用
@media (max-width: 768px)把<aside></aside>改成display: block并自然流到主内容下方，否则横向溢出 - 旧版 IE（≤11）不支持
grid，若需兼容，得提供float+calc()回退，或用display: -ms-grid -
<aside></aside>默认无 ARIA role，某些老旧读屏器识别弱，建议显式加role="complementary" - 如果
<aside></aside>内容是 JS 动态插入（如异步加载的“相关文章”），记得触发aria-live="polite"区域更新，否则用户感知不到新内容
最常被跳过的其实是语义验证：不要问“它看起来像不像侧边栏”，而要问“删掉它，主内容还说得清吗”。这个问题的答案，比任何 CSS 都重要。
