标签不必须放页面最底部，它仅表示父容器的页脚语义内容；视觉位置由CSS控制，可嵌套于body、article或section中，且一个文档允许多个独立footer。
footer 标签不是“让内容沉到底部”的布局工具，它只负责语义表达——告诉浏览器、搜索引擎和读屏软件：“这部分是页脚”。视觉位置完全由 CSS 控制。
footer 为什么没出现在页面最底下？
这是最常被误解的一点。写 <footer>© 2026</footer> 后它悬在中间，不是 bug，是预期行为。HTML 规范从没承诺它自动吸底。
-
footer是语义容器，不是定位指令；它的渲染位置取决于它在 DOM 中的位置 + 父元素的 CSS 布局方式 - 如果父容器（比如
）没有高度约束（如min-height: 100vh），也没有启用 Flex/Grid 布局，footer就会紧贴前面内容流式排布 - 加
position: fixed或absolute确实能“钉住”，但容易遮挡内容、破坏滚动逻辑，且移动端键盘弹出时vh失准问题突出
怎么让 footer 真正“粘”在视口底部？
核心不是操作 footer 自身，而是控制它和兄弟元素（尤其是 main）的协作关系。Flex 布局是最稳方案：
- 给包裹
header/main/footer的容器（通常是）设：display: flex+flex-direction: column+min-height: 100vh - 给
<main></main>加flex: 1（等价于flex: 1 1 auto），它会撑满剩余空间，把footer“推”到底部 - 若页面有固定高度
header（如 64px），不要用calc(100vh - 64px)给main设高——移动端地址栏缩放、软键盘弹出会改变vh值，导致 footer 被截断或错位 - 更稳妥的做法：把
header也放进 Flex 容器，用flex-shrink: 0锁定其高度，整个结构仍可控
footer 能嵌套在 article 或 section 里吗？
完全可以，而且这是它的重要用途之一。HTML5 明确允许一个文档中存在多个 footer，各自归属不同语义区块。
立即学习“前端免费学习笔记（深入）”；
- 页面级
footer：放在底部，含版权、备案号、全局链接 - 文章级
footer：嵌在<article></article>内部，放作者、发布日期、分类标签、评论入口——这些信息只对该文有效，和全站页脚无关 - 区域级
footer：比如在<section class="features"></section>结尾处加<footer><a href="#">查看更多功能</a></footer>，作为该模块的补充动作区 - 禁止行为：在同一个
section或article里写两个footer；也不该把主导航菜单塞进footer（那是nav的职责）
footer 里的联系信息怎么写才合规？
HTML5 规范明确建议：如果 footer 包含联系信息，应使用 <address></address> 标签包裹，而非普通 p 或 div。
-
<address></address>是语义化专用标签，专用于标注作者/拥有者联系方式（邮箱、电话、地址、社交链接等） - 它默认有斜体样式，但更重要的是，读屏软件会据此识别“这是可联系的信息”，辅助用户快速跳转
- 错误写法：
<footer><p>contact@example.com</p></footer> - 正确写法：
<footer><address><a href="mailto:contact@example.com">contact@example.com</a></address></footer> - 注意：
<address></address>只适用于“本页/本节”的作者联系信息，不适用于公司总部地址（除非该页就是公司介绍页）
真正容易被忽略的点在于：语义和布局必须解耦。很多人一边写 footer，一边立刻想“怎么让它固定在底部”，结果用错定位方式、破坏可访问性、或在响应式场景下失效。先厘清“它属于谁”（语义归属），再决定“它在哪”（CSS 布局），顺序反了，后面全是补丁。
