浮动导致父容器塌陷，使sticky失去有效包含块而失效；需清除浮动或改用flex布局，并在ios safari中添加-webkit-sticky前缀。
浮动元素导致父容器高度塌陷，sticky失去有效包含块
float: left 或 float: right 会让元素脱离文档流，造成父容器无法正确计算高度——如果 sticky 元素（比如 #topMenu）的直接父级是浮动破坏后的“塌陷容器”，它的包含块（containing block）就会变成更上层的、可能不可滚动的节点，浏览器找不到可依赖的滚动上下文，position: sticky 直接被忽略。
常见现象：DevTools 中 position 的 computed 值始终是 static，哪怕样式里写了 top: 0；滚动时元素完全不动，或只在初始位置“卡住”一下就随文档流消失。
- 用 DevTools 的 Computed 面板逐级点开父元素，检查
height和overflow的实际计算值，特别注意是否为0px或auto但无溢出 - 临时给父容器加
overflow: hidden（仅用于验证）能强制撑高，但会截断 sticky —— 这说明问题根源是塌陷，不是 overflow 本身 - 更稳妥的验证方式：在父容器上右键 → Edit as HTML，手动插入一个
<div style="clear: both"></div>，看 sticky 是否立刻恢复
sticky 元素必须位于非塌陷、有明确高度的块级容器中
position: sticky 的生效前提是：它所在的包含块必须是一个“可测量、可滚动”的块格式化上下文（BFC）。而浮动破坏了 BFC 的生成条件，即使你写了 display: block，只要父级高度塌陷，sticky 就没锚定点。
不能靠 min-height 或 padding “骗过”浏览器——它需要的是真实内容撑起的、可触发滚动的容器高度。否则 sticky 会退化为 relative 行为，只在初始位置停留。
- 推荐解法：用
display: flex替代浮动布局，父容器自动创建 BFC 且不塌陷，子项设position: sticky可直接生效 - 遗留项目兼容方案：给浮动父容器加
::after伪元素清除浮动：.parent::after { content: ""; display: table; clear: both; } - 避免用
float+position: relative组合试图“挽救”——relative 不解决塌陷，反而可能干扰 sticky 的定位参考系
为什么清除浮动后 sticky 还不工作？再查三层
清除浮动只是修复了高度塌陷，但 sticky 失效常是多层叠加的结果。清除完浮动后仍无效，大概率是以下某一层在“拦截”：
- 祖先元素设置了
overflow: hidden、overflow: auto或overflow: scroll（重点盯.ant-modal-wrapper、.card、TabPane 容器等） - sticky 元素自身是 inline 标签（如
<span></span>、<a></a>），必须显式设display: block或display: inline-block - 父容器是
display: inline-flex或display: inline-grid—— 它们不产生 BFC，sticky 从解析阶段就被跳过
最快速定位法：在 DevTools 中选中 sticky 元素 → 右键 → Scroll into view，然后逐级向上点击 parentElement，在 Computed 面板中紧盯 overflow-x、overflow-y 和 display 的最终值，直到找到第一个非 visible 的 overflow 或非块级的 display。
iOS Safari 下还要额外加 -webkit-sticky
即使 DOM 结构和 CSS 都正确，iOS Safari 15.4 及更早版本（大量存量设备仍在使用）完全不识别 position: sticky，只认 position: -webkit-sticky，而且必须写在标准声明之前：
header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
漏掉 -webkit- 前缀，或顺序颠倒（比如 position: sticky; position: -webkit-sticky;），Safari 会直接忽略整条规则。这不是兼容性降级，而是彻底不生效。
别信“现在不用加了”——2026 年仍有大量企业内网设备、旧版 iPadOS 在跑 Safari 15.x，线上 bug 报告里近三成 sticky 失效都卡在这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
