scrollspy 不高亮导航项的主因是父容器塌陷导致 offsettop 计算异常，需用伪元素清除浮动或改用 flex/grid；同时须确保 dom 顺序、id/ href 匹配及 spa 中实例刷新。
ScrollSpy 不高亮导航项，先查父容器是否塌陷
浮动元素脱离文档流后，若父容器未清除浮动，高度会坍缩为 0 —— 这直接导致 ScrollSpy 计算目标区域位置时出错，section 元素看似在页面上，实际在 DOM 中的 offsetTop 可能是 0 或异常值，监听自然失效。
用浏览器开发者工具选中目标 section，看蓝色高亮框是否完整包裹内容；临时加一句 border: 1px solid red 到其父容器，立刻暴露塌陷问题。
- 别依赖
overflow: hidden强撑高度——它虽触发 BFC，但可能意外裁剪position: absolute子元素或阴影 - 优先用伪元素清除法：
.section-wrapper::after { content: ""; display: table; clear: both; } - 如果该容器已是
display: flex或display: grid，浮动本身已被忽略，此时应移除float，改用 Flex/Grid 布局对齐
目标区块 id 与导航 href 匹配失败，检查浮动是否干扰 DOM 顺序
ScrollSpy 要求目标 section 的 DOM 顺序必须和导航项顺序严格一致。浮动本身不改变 DOM 顺序，但若因塌陷导致渲染错位，开发者容易误判结构——比如视觉上「关于我们」在「服务」下方，但 DOM 中它被挤到了顶部，data-bs-target 就会跳过它。
- 打开 Elements 面板，手动拖拽查看
section节点是否按预期顺序排列 - 确保每个目标区块有合法、唯一、无空格/特殊字符的
id，例如id="about"，而非id="about us" - 导航项的
href必须是完整锚点格式，如href="#about"，不能是href="about"或href="/#about"（后者在 SPA 中需额外处理）
滚动容器内含浮动子元素，offsetTop 计算偏移异常
当 ScrollSpy 的滚动容器（如 body 或自定义 .main-content）内部存在未清除的浮动区块时，其 getBoundingClientRect() 和 offsetTop 可能返回非预期值，尤其在 Safari 或旧版 Edge 中更明显。这会导致监听阈值判断失准，高亮延迟或跳过。
- 若滚动容器是
body，不要给body设float—— 它本就不该浮动 - 若滚动容器是自定义
div，且内部用了浮动布局，请统一改用 Flex/Grid，或至少确保该容器自身已通过::after清除浮动 - JS 初始化时，可加一层校验：
console.log(document.querySelector('#about').offsetTop)，确认值合理（非 0、非负数、随滚动变化）
SPA 中路由切换后 ScrollSpy 失效，不只是浮动问题
浮动塌陷只是静态结构问题；在 Vue/React 等 SPA 中，新路由加载的内容若未清除旧 ScrollSpy 实例，或未调用 refresh()，监听器仍绑定在已卸载的节点上，必然失效——此时即使浮动已清，也白搭。
- 每次路由进入前，调用
scrollSpyInstance.dispose()销毁旧实例 - 新内容挂载后，重新获取滚动容器和导航节点，再执行
new bootstrap.ScrollSpy(...) - 若使用声明式写法（
data-bs-spy），需手动触发scrollSpy.refresh()，否则新增的section不会被扫描到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
