float 不适合实现悬浮式侧边栏，因其本质为文字环绕设计，混用 fixed 会导致塌陷、高度丢失、渲染不一致；可靠方案仅有 position: fixed 或 position: sticky。
float 侧边栏在现代布局中基本不可用
直接说结论：float 不适合实现“悬浮式侧边栏”——它本质是为文字环绕设计的，强行用于固定定位会触发意外的文档流塌陷、父容器高度丢失、响应式错位等问题。浏览器一旦遇到 float + position: fixed 混用，往往直接忽略 float 或导致渲染不一致。
真正可行的方案只有两个：纯 position: fixed 配合 top/right 定位，或用 position: sticky 实现滚动吸附。前者完全脱离文档流，后者依赖父容器有明确高度和滚动上下文。
用 position: fixed 实现真·悬浮侧边栏
这是最稳定、兼容性最好（IE9+）、逻辑最直白的方式。关键点不是“怎么浮起来”，而是“怎么避免遮挡主内容”和“怎么响应滚动”。
-
position: fixed元素默认以视口为参考系，所以必须显式设置top和right（或left）值，例如top: 20px; right: 20px; - 主内容区域需预留右侧空间，否则会被遮挡：给
<main></main>或主体容器加padding-right（值 ≥ 侧边栏宽度 + 间距），或用margin-right - 若页面有横向滚动，
fixed元素会随视口固定，但可能超出 viewport 右边界——此时应加max-width: calc(100vw - 40px)限制自身宽度 - 移动端需额外处理：用媒体查询关闭
fixed，改用position: absolute或普通文档流布局，否则小屏下极易溢出
position: sticky 的适用边界很窄
position: sticky 看似理想，但它不是“悬浮”，而是“滚动到临界点后吸附”。它对父容器有硬性要求，稍不注意就完全失效。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有可滚动的上下文（比如设置了
height+overflow-y: auto），且不能是overflow: hidden - 必须设置
top或bottom值才有吸附效果，right/left单独设无效；若想右贴边吸附，得写right: 0; top: 10px;，但仅当父容器本身是右对齐时才自然 - 在 flex 或 grid 容器中，某些浏览器（如旧版 Safari）对
sticky支持不稳定，建议包裹一层普通<div> <li>它无法脱离父容器边界——如果父容器高度不够，侧边栏根本没机会“吸”上去</li> <h3>别踩这些兼容性和交互坑</h3> <p>看似简单的悬浮，实际在真实项目里最容易翻车的是细节：</p> <ul> <li>z-index 层级混乱：<code>fixed元素默认层级低于部分transform或opacity 的元素，务必显式设 <code>z-index: 1000并检查父级是否创建了新的层叠上下文 - 滚动穿透问题：iOS Safari 在
fixed元素上滑动时，底层页面仍会滚动——加touch-action: none可缓解，但可能影响内部滚动容器 - 键盘焦点丢失：
fixed侧边栏若含表单或按钮，在键盘导航（Tab 键）时容易跳过，需手动管理tabindex和focus() - 无障碍支持弱：屏幕阅读器可能忽略
fixed区域，建议加aria-label或role="complementary"明确语义
悬浮式侧边栏真正的复杂点不在定位方式本身，而在于它如何与滚动、缩放、焦点、读屏共存——这些细节几乎不会报错，但用户一用就卡顿或找不到入口。
