fixed侧边栏错位的根本原因是脱离文档流后未为内容区手动让位；需用margin-left或flex布局预留空间，并设top匹配导航高度，同时确保内容区有overflow:auto和可计算高度。
不难，但直接套用“三栏”“固定侧边栏”这类说法容易踩坑——真正卡住初学者的，不是布局逻辑本身，而是对 position、display 和文档流关系的理解偏差。
为什么 fixed 侧边栏一加就错位？
常见现象：菜单栏设置了 position: fixed，但内容区文字被遮挡、滚动时错位、右侧区域宽度计算失效。
根本原因不是代码写错了，而是没处理好“脱离文档流”后的空间让位问题。fixed 元素会完全脱离正常流，父容器不再为它预留空间，导致后续元素上移覆盖。
- 必须手动给内容区设置
margin-left或left偏移，值要等于侧边栏宽度（比如200px） -
top值需匹配顶部导航栏高度（如48px），否则会和.pg-header重叠 - 如果内容区也用了
position: fixed，两者必须共用同一参考容器（比如都相对于body），否则层级或尺寸易失控
flex 布局比 float 更适合管理系统？
是，但别无脑替换。float 是理解文档流的“必经台阶”，而 flex 是解决等高、居中、响应式收缩的高效工具——两者适用场景不同。
立即学习“前端免费学习笔记（深入）”；
管理系统里，真正该用 flex 的地方是：.pg-content 内部的主内容区与侧边栏并排、顶部导航栏内按钮水平居中、页脚底部对齐等。
- 避免在
body直接设display: flex，会导致header/footer被拉伸变形 - 侧边栏固定宽度 + 主内容区自适应，推荐：父容器
display: flex，侧边栏设flex: 0 0 200px，主内容区设flex: 1 - flex 不兼容 IE9 及以下，若需支持旧系统，仍得 fallback 到 float + clear
语义化标签（如 nav、aside）影响布局吗？
不影响。这些标签默认就是 display: block，和 div 行为一致，浏览器不会因为用了 aside 就自动给你加边距或浮动。
它们的价值在于结构清晰、利于 SEO 和屏幕阅读器识别，但样式必须靠 CSS 显式控制。
- 别指望
<nav></nav>自带导航样式，它和<div class="nav"> 渲染效果完全一样 <li>想让 <code><aside></aside>固定在左侧？仍得写position: fixed或flex布局规则 - 混用语义标签和老式
div不会报错，但长期维护时，<header><nav><main><aside><footer></footer></aside></main></nav></header>这套结构更容易定位模块
最常被忽略的一点：管理系统页面往往内容高度不固定，但侧边栏又要求“随滚动始终可见”。这时仅靠 position: fixed 不够，还得确保内容区有 overflow: auto 且高度可计算——否则滚动条出不来，或者整个页面被撑爆。
