是语义标签而非视觉侧边栏，需配合 css 实现布局；flex 推荐 main{flex:1}+aside{width:300px;flex-shrink:0}；grid 推荐 grid-template-columns:1fr 300px 并用 gap 控制间距。
aside 标签不是侧边栏的万能解
用 <aside></aside> 不等于自动获得视觉上的侧边栏——它只是语义标记，浏览器不会给它加浮动、宽度或定位。很多人写了 <aside></aside> 却发现内容还在主流程里堆着，就是因为没配 CSS。
- 语义上，
<aside></aside>表示与主内容相关但可独立存在的部分（比如作者简介、延伸阅读、广告），不是“放右边的盒子” - 若想让它视觉上靠右，得手动写
float: right或用display: flex/grid布局 - 在老版本 IE（如 IE8）里，
<aside></aside>不被识别为块级元素，需配合 HTML5 shiv 或重置样式
Flex 布局下 aside 怎么固定宽度+自适应
现代主流做法是用 display: flex 把 <main></main> 和 <aside></aside> 并排，但宽度控制容易出错：设死像素值会卡住响应式，全用 flex: 1 又会让 aside 和 main 一样宽。
- 推荐组合：
main { flex: 1; }+aside { width: 300px; flex-shrink: 0; }—— 主内容撑满剩余空间，aside 固宽且不压缩 - 如果要响应式收缩，把
width换成min-width: 260px; max-width: 320px;，再配合媒体查询 - 注意：父容器必须有明确宽度（比如
width: 100%或max-width），否则 flex 项可能溢出
用 CSS Grid 替代 float 实现真·侧边栏布局
Grid 更直观，尤其适合多列、带间隙、需对齐的场景。但初学者常把 grid-template-columns 写成百分比，结果在小屏上崩掉。
- 稳妥写法：
grid-template-columns: 1fr 300px;（主内容弹性，aside 固宽） - 加间隙用
gap: 20px;，别用margin—— 后者在 grid 里行为不可控 - 如果 aside 要在小屏下移到主内容下方，用媒体查询改
grid-template-columns: 1fr;+grid-template-areas重新规划区域 - 注意兼容性：IE 完全不支持 Grid，Safari 旧版（fr 单位支持不稳定
aside 里放什么内容才算语义正确
搜索引擎和读屏软件会依赖这个标签判断内容重要性。乱塞导航、登录框、页脚链接进去，反而降低可访问性评分。
立即学习“前端免费学习笔记（深入）”；
- 合适内容：
<aside><p>本文作者：张三，专注前端性能优化 5 年</p></aside>、引用来源、术语解释、相关文章列表 - 不合适内容：
<aside><nav>...</nav></aside>（导航应放<nav></nav>）、<aside><footer>...</footer></aside>（页脚用<footer></footer>） - 嵌套限制：可以放
<h2></h2>，但不能放<main></main>或另一个<aside></aside>（W3C 明确不建议嵌套）
aside 的难点不在写法，而在判断“这段内容是否真的属于旁注”。很多人为了结构漂亮硬凑，结果语义失真、SEO 反降、屏幕阅读器逻辑混乱——这时候宁可用 <div role="complementary"> 更稳妥。</div>
