aside标签不构成双栏布局，需css控制；必须与main同级，仅局部补充时才嵌入article；flex需设宽和order；小屏应自然下移而非display:none。
aside 标签本身不构成双栏布局，它只负责声明“这部分内容是附属的”；真正实现双栏视觉效果，必须靠 CSS 的 display: flex 或 display: grid 控制，且需严格匹配语义层级。
aside 必须和 main 同级，不能塞进 article 或 main 里
双栏博客中，如果右侧是全站级推荐文章、标签云或作者简介，aside 就该和 main 并列，同为 body 的直接子元素。嵌套在 main 里会违反 HTML5 规范，部分校验工具报错，读屏器也可能误判范围。
- ✅ 正确结构：
<main></main><aside></aside>（同级） - ❌ 错误写法：
<main><aside></aside></main>（aside被当成主内容一部分） - ⚠️ 特殊情况：若右侧内容只服务于某一篇博文（比如该文专属的术语解释），才应把
aside写在article内部，此时它不参与全局双栏，而是局部补充
用 flex 实现双栏时，aside 宽度和 order 必须显式控制
仅写 display: flex 不够，aside 默认会撑满整行。必须设宽度，否则小屏下溢出；若 HTML 中 aside 写在 main 前面，但想视觉上放右边，还得用 order 调整流顺序，否则键盘焦点和读屏播报顺序错乱。
-
aside至少要设flex: 0 0 280px或width: 280px，不能只靠max-width - 若
aside在 HTML 中位于main之前，加main { order: 1; }和aside { order: 2; }才能保证视觉右置且逻辑顺序一致 - 别用
float: right—— 父容器易塌陷，文字可能绕进侧栏，且 IE11 已淘汰
响应式断点必须让 aside 自然下移，不能 display: none
小屏下强行隐藏 aside，等于告诉搜索引擎和读屏器“这内容不存在”。法律声明、版权归属、作者信息这类关键附属内容一旦被 display: none，就丧失语义价值。
- 正确做法：在
@media (max-width: 768px)中设aside { display: block; margin-top: 1.5rem; }，让它自然流到main下方 - Grid 布局可直接改
grid-template-columns: 1fr，无需重写 DOM 顺序 - 若
aside里有交互元素（如搜索框、订阅表单），更得保留——它们不是装饰，而是功能入口，此时应考虑是否真该用aside，还是换成section或form
最常被忽略的点是：语义边界不可妥协。一个 aside 放在 article 里，就只服务这一篇；想在多篇文章复用同一组推荐列表？得复制，不能靠 JS 搬运 DOM —— 语义不是样式，不能动态绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
