父容器高度塌陷是视差滚动失效的根因，因其破坏基于容器尺寸的位移计算基准；必须在浮动元素的直接父容器上应用display: flow-root或正确清除浮动，而非任意祖先层。
父容器高度塌陷直接破坏视差基准
视差滚动依赖元素在滚动过程中的相对位移计算，比如 transform: translateY() 或 background-position 的值，通常基于父容器的尺寸或滚动容器的视口位置。一旦父容器内全是 float: left 或 float: right 元素且未清除，它就会高度塌陷（height: 0px），导致所有基于该容器的坐标系失准——不是 JS 没算，而是算错了参照物。
实操建议：
- 用浏览器开发者工具选中视差区域的直接父容器，在 “Computed” 面板确认其
height是否为0px或远小于预期 - 若塌陷属实，不要只加
clear: both到某个兄弟元素上——它必须作用于浮动元素的**直接父容器自身** - 优先给该父容器设
display: flow-root，这是现代解法里最稳的：创建 BFC、不裁剪box-shadow、不触发 margin 合并
clear: both 在视差结构中极易失效
clear: both 不是“清空所有浮动”，它只对**前一个相邻的浮动兄弟元素**生效，且要求自身处于标准文档流中。而视差布局常伴随 transform、will-change 或 position: sticky，这些都会让清除元素脱离原始流位置，或使它和浮动元素不在同一个 BFC 内。
常见失效场景：
立即学习“前端免费学习笔记（深入）”；
- 清除元素自己设了
position: absolute或float，直接退出文档流，clear失去作用对象 - 父容器用了
display: flex，子元素即使写了float也无效，clear自然无意义 - 清除元素被
transform移动后，“视觉位置”和“文档流位置”分离，clear仍按原始流位置计算
多层嵌套视差容器时清除点错位
视差区域往往嵌套较深，例如 .parallax > .layer > .item，其中 .item 是浮动的。如果只在顶层 .parallax 上加清除逻辑，而 .layer 本身高度已塌陷，那么 .parallax 的计算依然失准——因为它的子容器没撑开，它自己也就“看不见”内容。
关键判断点：
- 清除动作必须落在**最内层浮动元素的直接父容器**上，而不是任意一层祖先
- 若使用伪元素清除（如
.clearfix::after），确保该类名加在正确的那一层容器上 - 若用
display: flow-root，同样只加在浮动子元素的直接父容器，避免过度包裹影响层级关系
浮动 + transform 组合引发合成降级（尤其 Safari）
不少旧式视差方案靠 position: relative + top 或 transform: translateY() 模拟位移。当这些元素同时存在浮动时，Safari 等浏览器可能因渲染上下文混乱，将本该硬件加速的 transform 降级为软件渲染，导致卡顿甚至完全不动。
这不是 CSS 写错了，而是浏览器底层合成策略被干扰：
- 浮动元素脱离文档流后，与
transform容器的层叠上下文关系变模糊 - 若祖先有
will-change: transform或filter，可能意外创建新 BFC，进一步割裂浮动包含关系 - 解决思路不是硬加
translateZ(0)，而是先去掉浮动——改用display: flex或display: grid布局，从根源规避冲突
