侧边导航栏固定应使用 position: fixed 脱离文档流，而非 float；需设固定宽度、top/left、z-index，并为主内容预留 margin-left 避免遮挡，clear 对其无效。
侧边导航栏固定需要脱离文档流
用 position: fixed 是最直接的方式，而不是靠 float。浮动元素仍属于文档流，无法真正“固定”在视口某处；强行给浮动元素加 fixed 会失效，因为 float 和 position: fixed 互斥。固定定位的元素会脱离文档流、相对于视口定位，这才是“固定”的本质。
- 侧边栏宽度建议设为固定值（如
200px），避免响应式错位 - 必须设置
top和left（或right）才能生效，只写position: fixed不会自动贴边 - 主内容区需预留空白——用
margin-left或padding-left避免被遮挡，值应 ≥ 侧边栏宽度
为什么清除浮动对 fixed 导航栏没用
clear 只影响**后续的浮动元素**或**包含块的清除行为**，而 position: fixed 元素已完全脱离文档流，不参与浮动布局，也不受 clear 影响。常见错误是给侧边栏加 float: left 再配 clear: both，结果既没固定、又破坏了布局流。
- 如果页面其他地方用了浮动（比如顶部导航或卡片列表），
clear仅用于解决那些区域的塌陷问题，和侧边栏无关 - 现代布局中，
clear已基本被display: flex或display: grid替代，没必要为固定侧边栏引入它 - 误用
clear还可能导致父容器高度计算异常，尤其在 JS 动态插入内容时
固定侧边栏与主内容的层叠关系
默认情况下，fixed 元素的 z-index 为 auto，可能被后续渲染的元素覆盖。主内容若用了 position: relative 且未设 z-index，也可能压住侧边栏——这不是 bug，而是层叠上下文的自然行为。
- 给侧边栏显式设置
z-index: 100（或更高），确保它始终在最上层 - 主内容区避免无意义地设
position: relative+z-index: 1，这会意外创建新层叠上下文并干扰层级 - 移动端需额外加
transform: translateZ(0)或will-change: transform防止 fixed 元素在 iOS Safari 中闪烁或消失
滚动时内容区如何避开 fixed 侧边栏
很多人以为只要侧边栏 fixed 就万事大吉，结果发现主内容文字紧贴侧边栏边缘，阅读体验差。这不是 CSS 自动处理的，必须手动留白。
- 推荐用
margin-left: 200px（对应侧边栏宽度），比padding-left更稳妥——padding 会被 box-sizing 影响，margin 不会 - 如果主内容是全宽卡片流，可改用
max-width: calc(100% - 200px)+margin: 0 auto居中，避免右侧溢出 - 响应式断点处记得同步调整
margin-left和侧边栏的width，否则小屏下留白错位
固定侧边栏真正的复杂点不在定位本身，而在它和页面其他交互逻辑的耦合：比如滚动监听、锚点跳转、键盘焦点管理、以及无障碍阅读器的顺序读取。这些往往被忽略，但直接影响可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
