浮动父容器高度塌陷导致锚点定位错位，因父容器高度为0使offsetTop计算失真；须在锚点直接父容器用display: flow-root清除浮动，并配scroll-margin-top补偿固定导航栏遮挡。
浮动父容器高度塌陷会干扰锚点定位
当锚点目标元素（如 ）被包裹在一个未清除浮动的父容器里时，该父容器实际高度为 0。浏览器滚动定位时，会按 DOM 中“视觉上不存在”的位置计算 offsetTop，导致跳转后目标内容被截断或错位——尤其在固定导航栏下，看起来像“跳过了标题”。
这不是锚点本身的问题，而是文档流断裂后，getBoundingClientRect() 和 offsetTop 返回值失真所致。
- 用开发者工具选中锚点元素，看“Computed”里的
top是否明显小于预期（比如 -200px），基本可确认是父级塌陷 - 检查父容器是否设置了
float、且没应用clearfix或display: flow-root - 若父容器同时有
height或max-height限制，也会掩盖塌陷，但加剧定位偏差
清除浮动必须作用于锚点元素的直接父容器
很多人把 clearfix 加在 body 或 wrapper 上，结果无效——因为锚点跳转只依赖目标元素及其**最近的非塌陷祖先**的高度和位置。如果 #about 的直接父级是 .section-wrapper，那清除逻辑就必须落在它身上。
- 推荐写法：
.section-wrapper { display: flow-root; }（简洁、无副作用、现代浏览器全覆盖） - 兼容旧版可选：
.section-wrapper::after { content: ""; display: table; clear: both; } - 避免用
overflow: hidden清除，它可能裁剪position: absolute子元素或阴影效果
scroll-margin-top 是比 JS 计算更稳的偏移补偿方案
即使清除了浮动，若页面顶部有 position: fixed 导航栏（高 64px），锚点仍会被遮挡。过去常用 JS 减去 offsetHeight，但动态内容加载、字体加载、响应式重排都会让这个值失效。
- 直接给锚点元素加：
#about { scroll-margin-top: 64px; } - 支持单位：px、rem、vh，也支持 calc()，比如
scroll-margin-top: calc(64px + 1rem); - 注意：该属性只对滚动容器生效，确保其祖先没设
overflow: hidden或clip-path - 兼容性：Chrome 69+、Firefox 68+、Safari 15.4+；IE 完全不支持，需降级用 JS
浮动 + 锚点组合最容易被忽略的细节
清除浮动只是第一步。真正让锚点“落得准”，还得同步处理几个隐性干扰：
-
box-sizing: border-box必须全局启用，否则浮动子元素的padding仍会导致父容器宽度溢出，触发隐藏水平滚动，间接影响垂直定位精度 - 所有锚点
id元素不能同时设margin-top: -XXpx来“上拉视觉位置”——这会让scrollIntoView()和scroll-margin行为混乱 - 若使用
scroll-behavior: smooth，务必确认没有其他脚本在跳转后立即调用window.scrollTo()，否则会中断平滑滚动并重置偏移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
