footer标签仅为语义容器，不具固定底部功能；position:fixed使其脱离文档流而遮挡内容，需用flex布局（html/body设min-height:100vh、body设display:flex/flex-direction:column、main设flex:1）实现真正沉底。
footer 标签本身不提供“固定到底部”的能力，它只是语义容器；所谓“固定”，本质是 CSS 布局问题，不是 HTML 标签功能。
为什么 position: fixed 会让 footer 遮内容或错位
这是最常踩的坑：把 footer 设成 position: fixed; bottom: 0; 后，它脱离文档流，不再占空间，导致主内容被它盖住。
- 必须给
body加padding-bottom，值至少等于footer高度（如padding-bottom: 60px） - 移动端 iOS Safari 键盘弹出时，
bottom: 0会失效，按钮上移或卡在半空 -
z-index: 999足够，别用99999——后续弹窗容易层级冲突 - 不要在
fixed元素里放<input>或<textarea>，尤其在移动端
怎么让 footer 真正“随内容沉底”（推荐方案）
这不是“固定”，而是让页脚在短页面时撑到视口底部、长页面时自然位于内容末尾——语义正确、无障碍友好、打印正常。
-
html和body都要设min-height: 100vh（不是height: 100vh） -
body加display: flex; flex-direction: column; - 主内容区（如
<main>或<div class="content">）设flex: 1 -
footer不需要任何定位、margin-top: auto或固定高度 - IE11 对
margin-top: auto支持不稳定，flex: 1更可靠
footer 放错位置会导致语义失效
HTML5 中 footer 的语义范围由其父容器决定，放错地方不仅影响 SEO，还会让屏幕阅读器误读结构。
立即学习“前端免费学习笔记（深入）”；
- 全站页脚应是
body的直接子元素，不能嵌套在<header>或<nav>里 - 文章页脚可放在
<article>内部末尾，表示“这篇文章的结尾信息” - 联系信息必须用
<address>包裹，否则不算结构化语义 -
footer必须闭合，否则浏览器会把后续所有 DOM 都当成它的子节点 - IE8 不识别
footer，需document.createElement('footer')触发兼容模式
移动端底部导航条该用 position: fixed 还是 Flex？
这是两类需求：全局页脚（版权/联系方式）和操作栏（导航/按钮）不能混用同一套逻辑。
- 底部导航条（如 TabBar）属于 UI 操作层，必须用
position: fixed; bottom: 0; left: 0; right: 0; - 高度建议写死（如
height: 56px），不用100vh或百分比——Safari 地址栏收放会引发跳变 - 局部卡片内按钮到底部，优先用
justify-content: space-between或flex: 1，别用absolute - 如果祖先容器有
overflow: hidden，fixed元素可能被裁剪，此时应提到body直接子级
真正难的不是写几行 CSS，而是分清「语义归属」和「视觉定位」——footer 写在哪，决定了它代表谁的结尾；而它出现在哪，取决于你用的是 Flex、Grid 还是 Fixed，每种都有明确的适用边界和副作用。
