应给 body 设置 padding-bottom 等于悬浮条实际渲染高度，否则内容会被 fixed 元素遮挡；悬浮条需用 position: fixed、bottom: 0、left: 0; right: 0 三件套；若需页脚随内容自然落位，应改用 Flexbox 布局。
直接给 body 加 padding-bottom，值等于悬浮条渲染高度，否则内容必然被遮挡——这不是 bug，是 position: fixed 的设计逻辑。
为什么 bottom: 0 的悬浮条一定遮内容
position: fixed 元素完全脱离文档流，浏览器不会为它预留空间。哪怕你设了 z-index: 9999，也只影响层叠顺序，不解决空间侵占问题。滚动时它始终压在最底层 z 轴上，而后续内容从视口顶部开始渲染，自然就“钻进”悬浮条下面了。
常见错误包括：
- 只写
footer { position: fixed; bottom: 0; }，没给body留空隙 - 试图用
margin-bottom加在最后一个<p>或<section>上——响应式下极易失效 - 用
height: 100vh或min-height: 100vh去“撑开”页面，反而导致滚动异常或白屏
正确设置 body padding-bottom 的要点
这是最轻量、兼容性最好、纯 CSS 可解的方案：
立即学习“前端免费学习笔记（深入）”；
- 值必须 ≥ 悬浮条的**实际渲染高度**（不是设计稿标注值，也不是
100vh） - 推荐用固定像素值，如
padding-bottom: 56px，避免 Safari 地址栏收放引发跳变 - 若需适配字体缩放或大屏小屏，可用
clamp()：padding-bottom: clamp(48px, 5.5vw, 64px) - 绝对不要用
min-height或height设置body，会破坏滚动行为
悬浮条自身必须写的三件套样式
漏掉任意一项都可能导致错位、截断或右侧留白（尤其滚动条出现时）：
-
position: fixed—— 必须，无替代 -
bottom: 0—— 锚定视口底部，不是父容器底部 -
left: 0; right: 0—— 确保水平铺满，防止滚动条出现时右侧留白
额外提醒：内部避免放 <input> 或 <textarea>，iOS Safari 键盘弹出会触发 viewport 缩放，fixed 元素常卡在错误位置。
别混淆“沉底”和“悬浮”——需求错了代码再对也没用
如果你要的是“内容少时页脚贴底、内容多时随内容自然落位”，那 position: fixed 就是误用。此时应改用 Flexbox：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }-
main { flex: 1; }—— 让主内容吃掉所有剩余空间 -
footer { width: 100%; }—— 不需要任何定位，也不遮内容
注意 HTML 结构必须是 <header>→<main>→<footer> 顺序，否则 flex: 1 不生效。真正难处理的不是怎么写 CSS，而是先分清你要的是“沉底”还是“悬浮”——这两个需求的技术路径完全相反。
