页脚必须作为body的直接子元素且为最后一个子元素，正确语义结构+flex布局（body设flex-column、min-height:100vh，main设flex:1，footer设margin-top:auto）才能真正贴底并保障可访问性。
页脚必须放在 里，且得是最后一个子元素
很多人的页脚“不贴底”或 JS 拿不到元素，根本原因不是 CSS 写错，而是 DOM 结构违规。footer 是语义标签，不是万能容器——它不能挂在 html 或 head 下，也不能嵌在 header、nav 里。
浏览器会自动把错位的 footer 塞进 body，但这时 document.querySelector('footer') 可能返回 null，position: sticky 也大概率失效。
-
footer应紧接在main或主要内容区块之后、之前 - 若页面有多个逻辑区块（如博客列表页+每篇文章），可用多个
footer，但每个都得在对应语义容器内（比如article末尾） - 别用
div class="footer"替代footer—— 语义丢失会影响 SEO 和屏幕阅读器识别
用 flex + margin-top: auto 实现真正贴底，而不是 fixed
position: fixed; bottom: 0; 看似简单，实际会遮住内容、打印时消失、屏幕阅读器跳过，不符合 WCAG。
可靠方案是让 body 成为 flex 容器，把 footer 推到底部：
立即学习“前端免费学习笔记（深入）”；
-
body加display: flex; flex-direction: column; min-height: 100vh; -
main（或内容区）加flex: 1;占满剩余空间 -
footer加margin-top: auto;—— 这才是“文档流底部”的正确解法 - 如果不用
main，直接给内容包裹层设flex: 1也行，但必须确保它是body的直接子元素
页脚里的导航必须套 nav 并带 aria-label
页脚塞一堆链接很常见，但全丢进 footer 会导致语义混乱：这些是“网站级导航”，不是“本页元信息”。搜索引擎和辅助技术会误判。
正确做法是明确划分职责：
- 版权、联系方式等归
footer直接管理 - “关于我们”“隐私政策”这类通用导航，必须包在
nav里，并加上aria-label="页脚导航" - 避免用
role="footer"——footer标签本身已隐含该 role，冗余属性反而干扰解析 - 链接路径用根相对路径（如
/privacy.html），别用../，否则子目录页容易 404
响应式布局别靠 float，用 flex-wrap + media query 控制换行
老教程里用 float: left/right 做左右分栏，现在不仅难维护，还容易在小屏上溢出或重叠。
现代写法更可控：
- 给页脚容器设
display: flex; flex-wrap: wrap; - 子项（如版权区、链接区）设
flex: 1 1 200px;，保证最小宽度又可伸缩 - 在
@media (max-width: 768px)里改flex-direction: column;，让所有区块垂直堆叠 - 同时调小
font-size和padding，避免移动端文字挤在一起
真正容易被忽略的，是语义层级和可访问性标记——它们不显眼，但一旦缺失，页脚就只是个“长得像页脚”的 div。
