aside仅负责语义标记，不控制布局；必须配合CSS（如flex或grid）才能实现右侧显示、响应式收起等视觉效果，否则默认为块级独占一行。
直接用 aside 标签不会让内容“侧边栏化”，它只负责语义标记；真正决定是否显示为侧边栏、在哪显示、怎么响应式收起的，全是 CSS。
为什么写了 aside 却没出现在右边？
因为 aside 是纯语义标签，浏览器默认把它当普通 div 渲染：块级、100% 宽、独占一行。不加 CSS，它永远不会自动靠右或并排。
- 常见错误：只写
<aside><p>作者简介</p></aside>就以为完事了 - 正确做法：必须给父容器和
aside同时设布局规则，比如display: flex或display: grid - 旧项目若还在用
float，记得给主内容加overflow: hidden或clear: both防止文字环绕错位
怎样用 flex 把 aside 真正“摆”到主内容旁边？
现代最稳的方案是 Flexbox，结构清晰、断点友好、无需清除浮动。
- 父容器（如
article或main）设display: flex; gap: 20px; -
main或主内容区域加flex: 1;，让它自适应剩余宽度 -
aside设固定宽（如width: 300px;）或弹性宽（flex: 0 0 300px;） - 响应式断点里必须重置：小屏下
@media (max-width: 768px) { article { flex-direction: column; } }，否则aside会强行撑宽页面
aside 放错位置会导致什么问题？
语义错位比样式错位更难排查，尤其影响 SEO 和读屏器体验。
- 放在
<header>或<footer>里：浏览器虽能渲染，但读屏器会误读为“页眉补充区”，逻辑断裂 - 包裹主导航或登录按钮：违反“可移除而不影响主逻辑”的前提，应改用
nav或带role="navigation"的div - 放广告且无额外标注：搜索引擎可能降权，WCAG 要求广告需明确标识，建议用
<div role="complementary" aria-label="广告"> - 嵌套在
<section>但没就近关联内容：比如整页只有一个section，里面塞了 3 个aside，语义粒度就模糊了
要不要给 aside 加 role 或 aria-label？
要，尤其当内容类型不直观或需兼容老旧读屏器时。
-
role="complementary"是aside的隐含语义，现代读屏器基本识别，但显式加上更稳妥 - 如果
aside内容是“客户评价摘要”，加aria-label="客户评价摘要"比空着强 - 动态插入的
aside（比如 JS 加载的推荐列表），记得用aria-live="polite"告诉读屏器内容已更新 - 别加
role="sidebar"——这不是标准 ARIA role，会被忽略
最容易被忽略的其实是语义边界：一个 aside 应该紧贴它所服务的最近一块主内容（article 或 section），而不是堆在 body 底部再靠 CSS 拉上去——那样 HTML 结构和视觉呈现就彻底脱钩了。
