aside标签本身不产生侧边栏效果，它只是语义标记；真正让内容“靠边”的是css的display:flex或display:grid布局，而非float或position:absolute——因为aside默认为块级元素，垂直流式排列、宽度100%，浏览器只认语义与css规则，不识别“侧边栏”概念。
aside 标签本身不产生侧边栏效果，它只是语义标记；真正让内容“靠边”的，是 CSS 的 display: flex 或 display: grid ——不是 float，也不是直接写 position: fixed。
为什么写了 aside 内容还在正文下面？
因为 aside 默认是块级元素，行为和 p、div 完全一致：垂直流式排列、宽度 100%、无浮动、无定位。浏览器根本不认“侧边栏”这个概念，只认语义和 CSS 规则。
- 常见错误：只写
<aside><p>作者简介</p></aside>，没配任何 CSS，就指望它自动右对齐 - 更隐蔽的问题：父容器没设
display: flex或display: grid，却在aside上硬加float: right，结果父容器塌陷、文字绕进侧栏 - 响应式遗漏：小屏下没用
@media (max-width: 768px)把aside改成display: block，导致横向溢出
怎么让 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; - 必须显式设宽度（如
flex-basis、width或grid-column），否则窄屏下可能撑破容器 - 常见错误：把整个侧边栏都套
aside，结果导航部分失去语义；或全用nav，让读屏软件无法识别补充性内容 - 结构嵌套要合理：
aside可在nav内，但别反着来；若同时含导航和辅助内容，推荐外层aside统一语义归属，内部再按功能拆分 -
aside必须嵌套在article内部（服务单篇内容），或与main并列作为body的直接子元素（服务全站）；禁止塞进header、footer、nav或main内部 -
width动画失败主因：父容器是flex时，width被flex-basis覆盖；必须改flex-basis，且显式设min-width: 0否则缩不下去 -
overflow: hidden必须加在侧边栏自身上，否则缩窄后图标或文字会溢出边界 -
position: sticky要生效，其直接父容器必须有明确高度（如min-height: 100vh），且不能触发新层叠上下文（避免transform或will-change）
导航类侧边栏该用 nav 还是 aside？
如果侧边栏里主要是跳转链接（如“分类目录”“快捷入口”），它本质是导航行为——必须用 nav 并加 aria-label，例如：<nav aria-label="文章分类导航"><ul><li>前端技术</li></ul></nav>。
折叠/固定侧边栏的三个关键 CSS 坑
用 width 做折叠动画、用 position: sticky 实现滚动固定，看似简单，实际极易失效。
语义错位比布局错乱更难排查：删掉整个 aside 后，主内容仍需能独立表达完整意思——这是唯一判断标准。别为了“看起来像侧边栏”而牺牲结构逻辑。
