footer只是语义容器，不自动贴底；需设body为flex column、main为flex:1、footer为body直接子元素，禁用fixed定位，并配合flex-wrap和语义化列表确保响应式与可访问性。
footer 标签本身不会粘底，它只是语义容器；所谓“粘性底部”，本质是靠父容器的布局能力把 footer 推到可视区最下方——不是加 position: fixed，也不是靠 JS 算高度，而是用现代 CSS 布局让内容“撑”它下去。
为什么写完 footer 还悬在半空？
因为浏览器把它当普通块级元素：内容少时，它就停在内容末尾；内容多时才自然沉底。这不是 bug，是默认文档流行为。常见误操作包括：margin-top: auto 没生效（父容器没设 display: flex）、height: 100vh 写成 min-height: 100vh（反了）、footer 被嵌套在 div 里而非 body 直接子元素。
body 设 flex + main 设 flex: 1 是最稳方案
这是目前兼容性好、语义清晰、无障碍友好的主流做法。关键点不在 footer 自身，而在它和 main 的协作关系：
-
html和body都要设min-height: 100vh（不是height: 100vh），否则短页下flex: 1没空间可分 -
body必须设display: flex; flex-direction: column，且header、main、footer是它的直接子元素，顺序不能错 -
main加flex: 1，它会自动吃掉所有剩余空间，把footer“顶”到底部；footer不需要任何margin-top: auto或固定高度 - 如果
header或footer有动态高度（比如响应式字号），flex: 1依然可靠；而margin-top: auto在 IE11 下支持不稳
移动端 Safari 的 vh 跳变怎么防？
iOS Safari 地址栏收起/展开时，100vh 会动态变化，导致 footer 上浮或被截断。这不是你代码写错了，是浏览器行为：
- 优先用
min-height: 100vh而非height: 100vh，避免内容超长时被裁剪 - 不要依赖
vh计算padding-bottom或margin——这类值一旦写死，地址栏变化就会露馅 - 若必须兼容老 iOS（如 Safari 14.4 及更早），可加一层降级：用
min-height: -webkit-fill-available替代部分vh -
footer内部链接列表必须设flex-wrap: wrap，否则小屏上会横向滚动——很多人只设了display: flex却忘了这行
别碰 position: fixed，除非你真需要悬浮操作栏
position: fixed 让 footer 脱离文档流，结果就是内容从它底下“穿过去”，尤其长页面底部文字直接被盖住。它只适合真正需要始终可见的 UI 元素（比如底部导航按钮），不适合版权信息这类语义页脚：
- 若硬要用，必须给
body加padding-bottom，值至少等于footer高度（如padding-bottom: 60px） -
z-index: 999足够，别用99999——后续弹窗容易层级冲突 - 绝对禁止在
fixed元素里放<input>或<textarea></textarea>，iOS 键盘弹出后定位极易错乱 -
footer放错位置（比如嵌套在<nav></nav>或<section></section>里）会导致屏幕阅读器误读结构，SEO 也受影响
footer 的语义边界和布局上下文——它在哪、谁包它、谁推它、谁撑它，每一步错位都会让“贴底”变成“飘空”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
