只写 position: fixed; bottom: 0 会遮挡内容，因其脱离文档流，浏览器不预留空间，后续内容从视口底部向上渲染而被覆盖；必须给 body 设置 padding-bottom（值≥悬浮条实际高度），配合 left: 0; right: 0; bottom: 0 三件套，并避免内部放表单控件。
为什么只写 position: fixed; bottom: 0 会遮内容
它脱离文档流，浏览器完全不为它预留空间，后续内容从视口底部“往上堆”，直接被盖住。这不是层级问题（z-index 再高也挡不住），是布局空间缺失。iOS Safari 键盘弹出、地址栏收放时，遮挡还会加剧——因为 fixed 元素的渲染高度可能瞬时错乱。
必须给 body 加 padding-bottom，不能靠 margin 或 height
这是最稳定、零 JS、全平台兼容的解法。关键点：
-
padding-bottom值必须 ≥ 悬浮条的实际渲染高度（比如56px），不能用100vh或百分比，否则 Safari 地址栏切换时会跳变 - 别写在最后一个
<div> 上加 <code>margin-bottom—— 响应式断点一变，空隙就失效 - 若高度需适配缩放（如用户调大系统字体），可用
padding-bottom: clamp(48px, 5.5vw, 64px)，但避免min-height或height，那会撑开body，破坏滚动逻辑 -
position: fixed—— 唯一能锚定视口的定位方式 -
bottom: 0—— 必须显式声明，不是靠top: auto或负 margin 推 -
left: 0; right: 0—— 确保水平铺满，且不随视口宽度变化而收缩 html, body { min-height: 100vh; margin: 0; }body { display: flex; flex-direction: column; }-
main { flex: 1; }—— 吃掉所有剩余空间 -
footer { width: 100%; }—— 不需要任何定位，也不遮内容
悬浮条自身样式三件套缺一不可
漏掉任意一项都可能导致截断、错位或右侧留白（尤其滚动条出现时）：
额外建议：z-index: 999 足够，别堆到 99999；内部避免放 <input> 或 <textarea></textarea>，iOS 键盘弹出会引发定位漂移。
别把“固定底部”和“页脚沉底”搞混
如果你其实要的是内容少时贴底、内容多时自然落位（比如语义化的 <footer></footer>），那 position: fixed 就是误用。此时该用 Flexbox：
结构必须是 <header>→<main>→<footer></footer></main></header> 顺序，否则 flex: 1 不生效。这种方案下，悬浮条和页脚的职责边界必须先厘清——一个抢空间，一个让空间，不能共存于同一场景。
