清除浮动必须作用于锚点直接父容器，因其是最近非塌陷祖先；用 display: flow-root 最佳，旧版可用伪元素 clearfix；再配 scroll-margin-top 解决导航栏遮挡。
浮动导致锚点跳转后内容被截断、标题被遮挡，或“跳过了目标”，不是锚点写错了，而是父容器高度塌陷让 offsetTop 和 getBoundingClientRect() 返回了失真坐标——必须先恢复文档流，再补偿滚动偏移。
为什么清除浮动必须作用于锚点的直接父容器
浏览器计算锚点位置时，只依赖目标元素及其**最近的非塌陷祖先**。如果 #about 的直接父级是 .section-wrapper，而它没清浮动，那整个定位上下文就建立在高度为 0 的容器上，top 值可能显示为 -180px 这类异常负值。
- 用开发者工具选中锚点元素，在 “Computed” 面板看
top是否明显小于预期（比如 -200px） - 检查该父容器是否设置了
float，且没配display: flow-root或::after清除逻辑 - 避免把
clearfix加在body或全局.wrapper上——无效，因为定位不往上跨多层找“健康”的祖先
display: flow-root 是首选清除方式
它启用 BFC，天然包裹浮动子项，不触发 margin 合并，也不裁剪 box-shadow 或 overflow: visible 子元素，比 overflow: hidden 安全得多。
- 现代写法：
.section-wrapper { display: flow-root; } - 兼容旧版（IE11 及更早）可退为伪元素 clearfix：
.section-wrapper::after { content: ""; display: table; clear: both; } - 若父容器同时设了
height或max-height，会掩盖塌陷现象，但会让锚点定位偏差更隐蔽、更难调试
scroll-margin-top 比 JS 补偿更稳定
即使清除了浮动，固定导航栏（如高 64px）仍会遮挡锚点标题。过去常用 JS 减去 offsetHeight，但字体加载、动态内容插入、响应式重排都会让这个值失效。
- 直接给锚点元素加：
#about { scroll-margin-top: 64px; } - 支持
rem、vh和calc()，例如：scroll-margin-top: calc(64px + 1rem); - 注意：该属性只对滚动容器生效，确保其祖先没设
overflow: hidden或clip-path - 兼容性：Chrome 69+、Firefox 68+、Safari 15.4+；IE 完全不支持，需降级用 JS
容易被忽略的隐性干扰点
清除浮动和设置 scroll-margin-top 只是基础。真正让锚点“落得准”，还得同步处理几个视觉上不可见但影响深远的细节：
-
box-sizing: border-box必须全局启用，否则padding仍会导致父容器宽度溢出，间接引发水平滚动条闪现，从而改变视口宽度、干扰垂直定位精度 - 所有锚点
id元素不能同时设margin-top: -XXpx来“上拉视觉位置”——这会让scrollIntoView()和scroll-margin-top计算错乱 - 确认锚点元素本身没被意外设置
float、position: absolute或transform，这些都会改变其在文档流中的几何位置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
