aside标签仅提供语义，不自动实现侧边栏效果，需css控制；默认为块级元素垂直排列；应嵌套在article或与main并列的body下，确保语义准确且主内容独立完整。
aside 标签本身不会产生侧边栏效果，它只是语义标记。真正在页面上看到“侧边栏”，全靠 CSS 控制；用错语义或漏写样式，轻则布局错乱，重则影响可访问性和 SEO。
为什么写了 aside 内容还在正文下面？
因为 aside 默认是普通块级元素，和 p、div 行为一致：垂直流式排列、宽度 100%、无浮动、无定位。浏览器不认“侧边栏”这个概念，只认语义。
- 常见错误：只写
<aside><p>作者简介</p></aside>，没配任何 CSS，就指望它自动右对齐 - 更隐蔽的问题：父容器没设
display: flex或display: grid，却在aside上硬加float: right，结果父容器塌陷、文字绕进侧栏 - 响应式遗漏：小屏下没用
@media (max-width: 768px)把aside改成display: block，导致横向溢出
aside 该嵌套在哪儿？位置决定语义范围
放在哪儿，不是为了排版，而是为了绑定语义对象——它服务的是最近的章节容器。
- 放在
<article></article>内部 → 只属于这篇文章，比如某篇教程旁的「兼容性备注」或段落里的「术语解释」 - 与
<main></main>并列、同为的直接子元素 → 全站级辅助内容，如右侧热门文章列表、分类导航 - 禁止塞进
<header></header>、<footer></footer>、<nav></nav>或<main></main>内部，HTML5 规范明确不允许 - 删掉整个
aside后，主内容仍需能独立表达完整意思——这是唯一判断标准
怎么让 aside 真正“靠边”？推荐用 flex 或 grid
别碰 float，IE11 已淘汰，且清除浮动极易出错；现代项目优先用 display: flex 或 display: grid。
- Flex 布局：父容器（如
或包裹<main></main>和<aside></aside>的<div>）设 <code>display: flex; gap: 1.5rem；aside设flex: 0 0 280px；main设flex: 1 - Grid 布局：父容器设
grid-template-columns: 1fr 280px；main用grid-column: 1；aside用grid-column: 2 - 必须显式设宽度（如
width、flex-basis或grid-column），否则窄屏下可能撑破容器 - 旧版 IE（≤11）需回退：用
display: -ms-grid或float + calc()，但 2026 年多数项目已无需兼容 - 主导航菜单 → 应用
<nav></nav>，放进aside会让屏幕阅读器跳过 - 页脚版权信息 → 应用
<footer></footer>，不是附属内容 - 与当前上下文完全无关的内容（如食谱页里硬塞天气预报）→ 即使加了
class="sidebar"也不合法 - 核心功能区块（如登录表单、商品购买按钮）→ 它们是主流程一部分，不能移除
- 纯装饰性图片或空占位符 → 没语义价值，用
div即可
什么内容不该放进 aside？误用比不用更糟
语义错位会误导读屏器、稀释 SEO 权重、破坏结构逻辑。
aside 的宽度、断点、网格列数都好调，但一旦语义绑错对象——比如把全站广告塞进某篇文章的 <article><aside></aside></article> 里，后续所有样式、JS 逻辑、无障碍测试都会跟着偏。
