aside不靠边是因为它仅为语义标签，需CSS（如flex或grid）显式控制布局；应嵌套在语义相关的章节容器内，内容须与主文相关且可省略，小屏需适配断点并添加无障碍标识。
aside标签为什么写了却不靠边？
因为aside只是语义标签，不是布局指令。浏览器默认把它当p或div>一样处理：块级、100%宽、垂直流式排列。你看到它堆在正文下面，不是代码写错了，是还没加 CSS 控制位置和尺寸。
- 常见错误：只写
<aside><p>作者简介</p></aside>就指望自动右对齐 - 更隐蔽的问题：父容器没设
display: flex或display: grid，却在aside上硬加float: right，结果父容器塌陷、文字绕进侧栏 -
aside必须显式设宽度（如flex-basis、width或grid-column），否则窄屏下可能撑破容器
怎么让aside真正出现在右侧？用flex还是grid？
现代项目优先选display: flex或display: grid，别碰float——清除浮动麻烦，响应式难控制，IE11 已淘汰。
-
Flex 方案：父容器（比如
<body>或包裹<main>和<aside>的<div>）设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 - 两种方案都必须配
@media (max-width: 768px)，把aside设为display: block并自然落到main下方，否则小屏会横向溢出
aside该嵌套在哪儿？位置决定语义范围
放在哪儿，不是为了排版，而是为了绑定语义对象——它服务的是最近的章节容器。
- 放在
<article>内部 → 只属于这篇文章，比如某篇教程旁的「兼容性备注」或段落里的「术语解释」 - 与
<main>并列、同为<body>的直接子元素 → 全站级辅助内容，如右侧热门文章列表、分类导航 - 禁止塞进
<header>、<footer>、<nav>或<main>内部，HTML5 规范明确不允许 - 删掉整个
aside后，主内容仍需能独立表达完整意思——这是唯一判断标准
什么内容不该放进aside？误用比不用更糟
语义错位会误导读屏器、稀释 SEO 权重、破坏结构逻辑。
立即学习“前端免费学习笔记（深入）”；
- 主导航菜单 → 应用
<nav>，放进aside会让屏幕阅读器跳过不读 - 页脚版权信息 → 应用
<footer>，不是附属内容 - 与当前上下文完全无关的内容（如食谱页里硬塞天气预报）→ 即使加了
class="sidebar"也不合法 - 核心功能区块（如登录表单、商品购买按钮）→ 它们是主流程一部分，不能移
- 广告位 →
aside暗示“可省略”，但广告不能被忽略，尤其需合规标注时，应改用<section aria-label="广告">或<div role="complementary" aria-label="推广内容">
aside的display，却忘了同步重置main的margin或flex行为；还有就是aside里全是链接却不加aria-label，屏幕阅读器只会读“complementary landmark”，用户根本不知道里面是什么。 
