应放弃浮动布局，改用flex或grid配合position: sticky/fixed；侧边栏用fixed时内容区需设margin-left让出空间，sticky则要求父容器有明确高度且不能overflow:hidden。
侧边栏固定定位时内容区被遮挡怎么办
直接用 position: fixed 做侧边栏，最常踩的坑就是正文文字往上跑、被盖住。这不是 CSS 写错了，而是 fixed 元素脱离文档流后，主内容区根本不知道“旁边有个固定块”，还按原来的位置渲染。
解决思路不是强行调 z-index 或加 margin-left 猜测宽度，而是让内容区主动“让出空间”：
- 给内容区（比如
.main）加margin-left，值等于侧边栏宽度 + 一点余量（如260px） - 侧边栏本身设
position: fixed; top: 0; left: 0; width: 250px; - 确保
.main的width是calc(100% - 260px)或设为auto配合margin
浮动布局下侧边栏无法随滚动固定
用 float: left + float: right 搭配 clear: both 实现两栏，本质是依赖文档流的布局方式。一旦你想让其中一栏“随滚动固定”，float 就失效了——因为 fixed 和 absolute 会脱离浮动上下文，不再受 clear 控制。
这时候硬套浮动只会导致布局错乱，比如侧边栏消失、主内容换行异常、清除失效等。真实项目中，浮动布局+滚动固定属于矛盾组合，不建议混用。
- 若必须保留旧浮动结构，可对侧边栏用
position: absolute+top: 0，但需确保父容器有position: relative且高度可控 - 更稳妥的做法是放弃
float，改用display: flex或grid，再对侧边栏单独加position: sticky或fixed -
position: sticky在支持的浏览器中更自然（只在视口内粘住），但 IE 完全不支持，需降级方案
sticky 与 fixed 在侧边栏场景的关键区别
position: sticky 看似是 relative 和 fixed 的混合体，但在侧边栏上行为很具体：它只在父容器范围内“粘”，一旦滚动超出父容器高度，就会立刻脱离并随文档流消失。
这意味着如果你把侧边栏放在一个高度有限的 .wrapper 里，它滚到一半就不见了；而 fixed 不管父容器，永远钉在视口左上角。
- 用
sticky：侧边栏父容器必须有明确高度（如min-height: 100vh），且不能是overflow: hidden - 用
fixed：侧边栏需脱离所有父容器，通常挂载在下一级，否则可能被transform、filter或will-change触发新层叠上下文而截断 - 移动端要注意：
fixed在 iOS Safari 中可能触发回弹或定位偏移，sticky兼容性稍好但仍有部分机型 bug
清除浮动后侧边栏高度塌陷还怎么固定
清除浮动（比如用 ::after 伪元素 + clear: both）是为了让父容器包裹浮动子元素，但它本身不影响定位行为。如果清除完发现侧边栏“没高度”“看不见”，大概率是它被清除方式反向影响了——比如清除节点插入位置不对，或者用了 visibility: hidden / height: 0 等副作用样式。
此时不要在清除代码里动侧边栏，而是检查三件事：
- 侧边栏是否设置了
height: 0、overflow: hidden或font-size: 0导致内容不可见 - 清除元素是否误加在侧边栏内部，导致它被当成“需要清除的对象”而强制换行
- 是否对侧边栏同时用了
float和position: fixed——后者会让前者完全失效，但开发者有时会留着 float 属性以为“多写点保险”
真正要 fix 的不是清除逻辑，而是定位方式和 DOM 结构的匹配度。浮动布局本身就不适合做滚动固定，越补越容易漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
