footer标签需配合css实现粘性底部，推荐用flexbox：body设display: flex和min-height: 100vh，main设flex: 1，footer自然到底部；避免position: fixed导致重叠或语义错误。
footer 标签本身不会自动固定在页面底部
很多人以为写个 <footer>© 2024 公司名称</footer> 就能稳稳停在视口底部，结果发现它只是“文档流末尾的块”，页面内容短时，footer 会卡在内容下方、离屏幕底边还有一大截空白。这不是标签用错了，是 CSS 没跟上。
关键在于：HTML 的 footer 是语义化容器，定位靠 CSS 控制。常见错误是只写 HTML、不加样式，或盲目套用 position: fixed 导致遮挡内容或滚动异常。
推荐用 flexbox 实现真正的“粘性底部”
现代方案中，flexbox 是最稳妥、兼容性好（IE11+）、语义清晰的做法。核心思路是让 body 或外层容器成为 flex 容器，主内容区域用 flex: 1 占满剩余高度，把 footer “撑”到底部。
- 给
设置display: flex和flex-direction: column - 给主要内容区（比如
<main></main>或一个<div class="content">）加 <code>flex: 1 -
footer不需要额外定位，自然落在底部
示例结构：
<header>...</header><main style="flex: 1;">...</main><footer>© 2024 公司名称</footer>
避免用 position: fixed 做版权页脚
position: fixed 看似简单，但实际容易出问题：
- 页面内容比视口高时，
footer会悬浮在中间，和滚动内容重叠 - 需要手动计算
bottom: 0+height，否则可能遮住最后一段文字 - 移动端键盘弹出时，fixed 元素常被顶起或错位
- 语义上，fixed 是“脱离文档流”的视觉层，不符合版权信息作为页面逻辑结尾的本意
除非你明确要“始终可见的悬浮版权条”（极少场景），否则别用 position: fixed。
版权声明内容本身要注意可访问性和更新维护
版权符号 © 或 © 能正常显示，但别只写年份：
- 动态年份建议用 JS 注入（如
<script>document.write(new Date().getFullYear())</script>），否则每年都要手动改 - 如果版权归属多个主体，用逗号分隔，别堆成一行长句；必要时换行用
<br>，但更推荐 CSS 控制 - 确保
footer文字颜色与背景有足够对比度（至少 4.5:1），否则屏幕阅读器或色弱用户可能忽略 - 不要把
footer套在<nav></nav>或<aside></aside>里——它就是页面级结尾，应直接位于body最后一级子元素
真正麻烦的不是写那行 <footer></footer>，而是让它在各种内容长度、设备尺寸、辅助技术下都可靠出现。flex 方案看似多写两行 CSS，省掉的是后续所有“为什么 footer 飞走了”的排查时间。
