锚点跳转后目标被固定导航栏遮挡，根本原因是锚点元素的直接父容器浮动未清除导致塌陷，使offsetTop计算失真；应先用display: flow-root清除浮动恢复父容器高度，再配合scroll-margin-top预留滚动偏移。
锚点跳转后目标被固定导航栏遮挡，是因为浮动父容器塌陷
直接原因是 #about 这类锚点元素的**直接父容器设置了 float 但未清除**，导致其高度为 0。浏览器计算 offsetTop 时，把目标当成了“视觉上不存在”的位置，最终滚动到的位置比预期高——看起来就像标题被顶部导航栏盖住了。
这不是 padding-top 本身的问题，而是它被用在了一个已经脱离文档流的上下文中。强行加 padding-top 只是掩盖症状，不解决根因。
- 用开发者工具选中锚点元素，在 “Computed” 面板里看
top值是否异常小（比如 -120px），基本可确认是父级塌陷 - 检查锚点元素的**直接父级**是否含
float: left或float: right，且没配display: flow-root或clearfix - 别在
body或最外层wrapper上加清除逻辑——锚点定位只认最近的非塌陷祖先
display: flow-root 是最干净的清除方式，比 padding-top 更可靠
display: flow-root 会为父容器创建一个新的 BFC（块级格式化上下文），天然包含浮动子元素，且不触发 margin 合并、不改变盒模型、无副作用。它比靠 padding-top + margin-top 抵消更底层、更稳定。
示例写法：
.section-wrapper {
display: flow-root; /* ✅ 清除内部 float 子元素 */
}
#about {
scroll-margin-top: 60px; /* ✅ 配合固定导航栏高度 */
}
- Chrome 58+ / Firefox 57+ / Safari 10.1+ 均支持，无需 polyfill
- 不要和
overflow: hidden混用——后者可能意外裁剪position: absolute子元素 - 若需兼容 IE，才退回到
clearfix类；但 IE 已无必要适配锚点偏移场景
scroll-margin-top 必须配合 display: flow-root 才能准确定位
scroll-margin-top 的作用是告诉浏览器：“滚动到这个元素时，请把它顶部往上留出 Npx 空间”。但它依赖一个前提：目标元素的 getBoundingClientRect() 返回值必须真实反映其视觉位置。而浮动塌陷会让这个值失真——scroll-margin-top 再大也没用。
- 先确保锚点父容器已用
display: flow-root恢复高度，再设scroll-margin-top - 数值建议取固定导航栏的实际高度（如
60px），而不是凭感觉填50px或80px - 避免对多个锚点分别写不同
scroll-margin-top——统一用一个 CSS 类更易维护 - 移动端要注意视口缩放或动态导航栏高度变化，可配合 JS 动态更新该值
为什么 padding-top + margin-top 抵消方案容易失效
这种写法本质是用视觉错觉骗过滚动行为：padding-top: 60px 把内容下推，margin-top: -60px 又把整个块拉回原位。但问题在于：
- 它无法修复
offsetTop计算失真，JS 中调用element.offsetTop仍返回错误值 - 若锚点元素本身有
border或outline，负 margin 可能导致边框被裁剪 - 响应式断点切换时，固定像素值（如
60px）在不同设备上不再匹配导航栏高度 - 与
scroll-behavior: smooth组合使用时，动画起始位置可能抖动
真正要解决的不是“怎么让内容看起来在正确位置”，而是“让浏览器知道它本来就在那里”。这一步没做对，后面所有偏移补偿都是临时打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
