视差滚动中浮动元素“漂移”主因是父容器高度塌陷导致transform或background-position计算基准错位，应优先用display: flow-root创建bfc包裹浮动子元素，避免clear: both失效；若需兼容旧浏览器，须在每一级视差容器上使用修复后的clearfix伪元素（display: table; height: 0; font-size: 0; line-height: 0）。
视差滚动中浮动元素突然“漂移”怎么办
视差滚动偏移不是 JavaScript 滚动逻辑出错，而是浮动子元素脱离文档流后，父容器高度塌陷，导致后续 transform: translateY() 或 background-position 计算基准错位。常见于用 position: relative + top 模拟视差的旧方案里。
实操建议：
- 先用浏览器开发者工具选中视差区域的直接父容器，在 “Computed” 面板确认其
height是否为0px或远小于预期——这是浮动未清除的铁证 - 检查该父容器是否被上层
transform、filter或will-change触发了新层叠上下文，导致::after伪元素清除失效（此时需改用display: flow-root） - 若视差区域嵌套多层（如
.parallax > .layer > .item），清除点必须落在最内层浮动元素的**直接父容器**上，而不是顶层.parallax
clear: both 在视差场景下为何经常失效
clear: both 不是全局“清空所有浮动”，它只对**前一个相邻的浮动兄弟元素**生效，且要求自身处于标准文档流中。在视差滚动中，这个条件极易被破坏。
典型失效原因：
- 清除元素本身设置了
float、position: absolute或display: none，直接退出文档流，clear失去作用对象 - 清除元素和浮动元素不在同一个 BFC 内（例如父容器用了
display: flex，子元素即使写了float也无效，clear自然无意义） - 清除元素被
transform移动后，其“视觉位置”和“文档流位置”分离，clear仍按原始流位置计算，造成错觉
display: flow-root 是视差布局中最稳的清除点
给视差层的直接父容器设 display: flow-root，能创建独立 BFC，天然包裹内部浮动子元素，且不触发 margin 合并、不裁剪 box-shadow 或 overflow 内容——这对依赖视觉反馈的视差效果至关重要。
兼容性注意点：
- Chrome 64+ / Firefox 58+ / Safari 15.4+ 原生支持；Safari 10.1–15.3 需加
display: -webkit-flow-root前缀（实际项目中可借助 PostCSS 自动补全） - IE11 及更早版本完全不支持，若必须兼容，退回到伪元素
.clearfix::after，但要确保该类加在**每一级需要撑高的视差容器**上，不能只加在顶层 - 避免与
height: 100vh同时使用：某些旧版 Safari 下flow-root容器若设了固定高，可能忽略内部浮动撑高，此时应改用min-height
为什么 clearfix 伪元素在滚动中会引入额外空白
视差滚动对像素级位置敏感，而传统 .clearfix::after 若未显式控制盒模型，会因默认 display: block 和继承的 line-height 在底部生成不可见但占空间的空白。
修复写法（必须）：
.clearfix::after {
content: "";
display: table; /* 不用 block，避免 line-height 干扰 */
clear: both;
height: 0;
font-size: 0; /* 彻底消除行高影响 */
line-height: 0;
}
若仍有多余间隙，检查父容器是否设置了 font-size 或 vertical-align，这些属性会间接影响伪元素的基线对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
