footer必须嵌套在语义化区块内且为最后一个直系子元素，正确位置仅有三种：body直接子级、article末尾或section底部；禁止悬空或多重嵌套，内容须匹配上下文，CSS推荐Flex布局实现贴底，可访问性需添加role="contentinfo"及具体aria-label。
footer必须嵌套在语义化区块里，不能悬空写
直接把<footer></footer>写在或里，浏览器会自动把它塞进，但 DOM 结构已失真——JS 用document.querySelector('footer')可能取不到预期节点，position: sticky也大概率失效。
正确位置只有三种：的直接子级（全站页脚）、<article></article>末尾（文章级页脚）、<section></section>内部底部（局部页脚）。别把它当 div 用，更别为了“看起来在底下”硬塞进某个<div class="wrapper"></div>里。
-
<footer></footer>必须是其父容器的最后一个直系子元素，否则margin-top: auto或sticky无法可靠生效 - 禁止嵌套多个
<footer></footer>在同一个<article></article>或<section></section>里——W3C 明确建议每个节元素最多一个<footer></footer> - 如果页面有多个逻辑区块（比如三篇博客），每篇都该有自己的
<footer></footer>，而不是只在底端放一个
页脚内容要匹配归属上下文，不是所有底部文字都能塞进去
<footer></footer>的语义是“与当前区块直接相关的信息”，不是“页面最下面那几行字”。把全站导航菜单、广告 banner 或登录入口塞进去，等于告诉屏幕阅读器“这些是本文结尾信息”，辅助技术会误判。
常见合规内容：
立即学习“前端免费学习笔记（深入）”；
- 全站级：版权年份、ICP备案号、隐私政策链接、
<address></address>包裹的联系邮箱 -
<article></article>级：作者名、发布日期（用<time datetime="2026-07-23"></time>）、编辑记录、标签列表 -
<section></section>级：参考资料链接、术语解释、本节更新时间
容易踩的坑：<footer><nav>...</nav></footer>——主导航属于<nav></nav>职责；<footer><div class="ad-banner">...</div></footer>——广告与“结尾补充”无关，应另起容器。
让页脚真正“贴底”的 CSS 写法，别碰 position: fixed
position: fixed; bottom: 0会让页脚悬浮遮挡内容、破坏阅读顺序、打印时消失，还绕过屏幕阅读器的文档流顺序。真正语义+可用的方案只有两种：
- Flex 布局（推荐）：
body { display: flex; flex-direction: column; min-height: 100vh; }+main { flex: 1; }+footer { margin-top: auto; } - Sticky 定位（需严格条件）：
footer { position: sticky; bottom: 0; }，但前提是父容器有明确高度（如min-height: 100vh）且<footer></footer>是最后一个子元素
注意：<footer></footer>本身不带默认 padding/margin，也不触发 BFC，样式得自己写；旧版 IE（≤8）不认识这个标签，但只需保证内容能显示，不必强求语义——毕竟现在没人还在维护 IE8 兼容。
可访问性补漏：role 和 aria-label 不是装饰，是刚需
只写<footer></footer>，屏幕阅读器只会读“footer”，不会说明这是“网站版权栏”还是“文章评论区”。用户靠这个判断上下文，尤其在多页脚页面中。
必须加的增强项：
- 全站页脚加
role="contentinfo"（WAI-ARIA 标准角色，明确标识“全局内容信息”） - 若页脚含联系人信息，用
<address></address>包裹，而非普通<p></p> - 避免用
aria-label="页脚"这种泛化描述，优先用实际内容锚定，比如aria-label="© 2026 MySite. 版权所有。隐私政策 | 联系我们"
复杂点在于：一个页面可能同时存在级和多个<article></article>级<footer></footer>，它们的role和aria-label必须差异化，否则辅助技术无法区分层级关系。
