当页面中存在浮动元素（如 `float: left`）时，`position: sticky` 可能因父容器高度塌陷而失效；本文提供两种可靠解法：清除浮动（兼容旧项目）与采用 flexbox 布局（推荐现代方案）。
position: sticky 是一种混合定位行为——在滚动到达阈值前表现为 relative，越过阈值后则像 fixed 一样吸附于视口。但其生效有严格前提：必须位于一个具有明确高度、未被浮动破坏文档流的包含块（containing block）内。而 float: left 和 float: right 会使元素脱离普通文档流，导致其后的兄弟元素（如 #topMenu）的包含块计算异常，甚至出现高度塌陷，从而使 sticky 失效。
✅ 方案一：清除浮动（向后兼容，适用于遗留代码）
在浮动元素之后插入清除浮动的空元素，可恢复父容器的正常高度计算，确保 #topMenu 的 sticky 行为生效：
<div id="topMenu">This message is sticky</div> <div id="leftContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div> <div id="rightContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div> <!-- 关键：清除浮动 --> <div style="clear: both;"></div>
对应 CSS 无需改动，但需注意：该方式依赖 HTML 结构干预，语义性弱，且若后续内容也需浮动，需重复添加清除元素。
✅ 方案二：使用 Flexbox（推荐，语义清晰、布局可控）
Flexbox 彻底规避浮动缺陷，通过 display: flex 创建弹性容器，使子元素自然并排且不脱离文档流，#topMenu 所处的上下文高度始终正常：
立即学习“前端免费学习笔记（深入）”；
#topMenu {
position: sticky;
top: 0;
background: #fff; /* 建议添加背景，避免文字透出 */
z-index: 100; /* 确保置顶层级 */
}
.flexbox {
display: flex;
gap: 20px; /* 可选：设置左右区域间距 */
}
#leftContent,
#rightContent {
flex: 1; /* 等宽自适应（或显式设 width: 200px） */
}<div id="topMenu">This message is sticky</div> <div class="flexbox"> <div id="leftContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div> <div id="rightContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div> </div>
⚠️ 注意事项：sticky 元素必须有明确的 top/bottom/left/right 值，且其最近的滚动祖先容器需有溢出（如 overflow-y: auto） —— 通常默认 滚动即满足；若 #topMenu 被包裹在浮动父容器中，sticky 仍会失效，因此避免将 sticky 元素本身设为浮动，也不应将其置于浮动子元素的同一父级中；Flexbox 方案中，建议为 #topMenu 添加 z-index 和背景色，防止滚动时内容穿透覆盖。
综上，优先采用 Flexbox 替代浮动，既解决 sticky 兼容性问题，又提升代码可维护性与响应式能力；仅在必须兼容极老浏览器（如 IE10 及以下）时，才选用 clear: both 清除浮动方案。
