页脚“飘在中间”的本质是body未撑开，正确方案是设body为flex column容器并让main flex:1自动占满剩余空间，从而将页脚自然推至底部，无需absolute或fixed定位。
短页面中页脚“飘在中间”，本质是 body 没撑开，不是页脚没定位好。直接给 body 设 min-height: 100vh 并配合弹性布局，就能让页脚沉到底部，且不遮内容、不脱离文档流。
Flexbox 实现：body 作 column 容器
这是最直观、兼容性好（支持到 IE11）、维护成本低的方案。关键不是“把页脚钉住”，而是让主体内容区域自动占满剩余空间，把页脚“推”下去。
-
html和body必须清空默认margin，并设min-height: 100vh（不用height: 100vh，否则长页面会截断） -
body设display: flex; flex-direction: column; - 用
<main>包裹所有主体内容，并设flex: 1—— 它会吃掉所有剩余高度，页脚自然落到最底 - 页脚本身保持
position: static（即默认值），不要加position: absolute或fixed
示例结构：
html {
min-height: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
/* 不设 height 或仅设最小高度，内容自适应 */
}Grid 实现：显式定义三行模板
适合已有明确 header/main/footer 语义结构的项目，逻辑更声明式，二维控制力强，但旧版 Safari 对 1fr 在 body 上的支持略不稳定（需测试）。
立即学习“前端免费学习笔记（深入）”；
-
body设display: grid，并用grid-template-rows: auto 1fr auto明确划分三块：头部（若有）、主体（弹性占位）、页脚 - 确保
header、main、footer是body的**直系子元素**；嵌套在.container里会破坏行高计算 - 同样禁用页脚的
position: absolute—— Grid 会自动把它放在第三行，无需干预 - 若页脚有固定高度（如
height: 60px），可改用grid-template-rows: auto 1fr 60px提升渲染确定性
绝对定位陷阱：为什么 bottom: 0 总是错位？
加了 position: absolute; bottom: 0 却不见效，大概率是定位上下文缺失或父容器塌陷。
- 页脚的**直接父元素**必须设
position: relative，否则bottom: 0会相对于html或视口定位，导致悬浮或覆盖内容 - 该父容器还必须有足够高度：仅靠
min-height: 100vh不够，要确保它包含全部内容区域（常见错误是把页脚塞进 Bootstrap 的.container，而.container本身不撑高） - 如果页脚内文字换行或图标导致高度变化，
bottom: 0无法自适应——这不是 bug，是绝对定位的固有限制 - 移动端 Safari 对
100vh的解析存在地址栏高度干扰问题，建议优先用100dvh（如支持）或 fallback 到100vh
Bootstrap 项目里页脚总被推偏？绕开 .container 干扰
Bootstrap 的 .container 默认带 max-width 和左右 auto margin，把页脚放里面再定位，只会贴在容器底，不是整页底。
- 页脚应作为
body的直系子元素，**不要包裹在任何.container、.row或.col里** - 若需栅格对齐，用
.container-fluid并重置 padding：padding-left: 0; padding-right: 0; - 避免给页脚加
width: 100%—— Flexbox/Grid 下它天然铺满，加了反而可能因 box-sizing 或 border 引发溢出 - 检查是否有全局 CSS 重置了
body的display（比如某些 UI 框架设为block），这会直接废掉 Flexbox 布局
真正难的不是让页脚“到底”，而是让它在内容极少时贴底、内容极多时不遮挡、响应式下不崩、第三方框架里不被吞——这些边界情况，全靠布局模型是否参与文档流。Flexbox 和 Grid 能赢，就赢在它们让页脚始终是页面结构的一部分，而不是一个被强行钉住的图钉。
