应使用 position: sticky 替代 Float 实现广告栏滚动吸附，需设置 top 值、避免父容器 overflow 裁剪，并为 ie11 提供 scroll + getboundingclientrect 手动 fixed 降级方案。
浮动元素脱离文档流导致广告栏错位
用 float 给侧边广告栏定位，页面一滚动就“飘走”或压住正文，根本原因是 float 只在当前块级上下文内生效，一旦父容器高度塌陷、或者遇到 position: fixed/sticky 的兄弟元素，布局就不可控。
常见错误现象：margin-bottom 失效、广告栏和下方文章内容重叠、滚动时广告栏突然跳到顶部或消失。
- 确保广告栏父容器有明确高度或触发 BFC（比如加
overflow: hidden或display: flow-root） - 避免对浮动广告栏本身再设
position: absolute/fixed—— 两者混用会直接退出正常渲染流 - 若广告需随滚动停留在视口右侧，
float不是正确解法；该换position: sticky或position: fixed
用 position: sticky 替代 float 实现滚动吸附
float 本就不适合做“滚动跟随”效果，而 position: sticky 是专为这类场景设计的，兼容性已覆盖 chrome 56+、firefox 59+、safari 15.4+，现代项目可放心用。
使用场景：右侧广告栏需在页面滚动时始终可见，但又不遮挡页脚，且随内容自然退出视口。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
top值（如top: 20px），否则不触发粘性行为 - 父容器不能有
overflow: hidden/clip，否则会截断粘性效果 - 若父容器高度不足（比如只有 100px），
sticky元素可能全程不“粘”，要检查 dom 结构层级和高度计算 - 示例：
.ad-sidebar { position: sticky; top: 20px; }
IE11 下 position: sticky 不生效怎么办
IE11 完全不支持 position: sticky，强行加只会退化成 Static。这时候不能硬套 polyfill（多数不稳定），得换思路。
最稳的降级方案是监听 scroll + getBoundingClientRect() 手动切 position: fixed，但要注意性能和边界判断。
- 只在需要时绑定 scroll 事件，滚动停止后 50ms 再检查位置，避免高频触发
- 判断条件别只写
top ，要加上 <code>bottom > 0（确保元素还在视口内），否则页脚出现时广告会盖住它 - 切换
fixed时记得记录原位置并补上left值，否则广告栏会跳到左侧 - 示例关键逻辑：
if (rect.top < 20 && rect.bottom > 0) { el.style.position = 'fixed'; el.style.top = '20px'; }
广告栏宽度突变引发的重排问题
很多侧边广告依赖第三方 js 动态注入内容，加载后宽度撑开、高度突变，导致周围文字重排甚至跳动。这不是样式问题，是渲染机制使然。
性能影响明显：每次重排都触发整行甚至整块重绘，尤其在中低端 android 设备上卡顿感强。
- 给广告容器预设宽高（如
width: 300px; min-height: 600px;），用min-height而非height，留出内容增长余量 - 避免在广告内部用
display: table或未设宽的flex子项 —— 这些会延迟尺寸计算 - 如果广告由 iframe 加载，加
sandbox属性并限制其 DOM 操作权限，防止它偷偷改父级样式
实际滚动吸附效果是否稳定，取决于父容器是否“守规矩”——有没有溢出裁剪、有没有塌陷、有没有被 transform 干扰。这些细节没调好，再换十种定位方式也没用。