页脚不会自动贴底，需用Flex布局实现：html和body设height:100%，body设display:flex、flex-direction:column、min-height:100vh，main设flex:1，footer作为body直接子元素保持默认流式布局。
页脚不是写个 <footer> 就能自动贴底的，关键在 CSS 布局控制；用 position: fixed 看似快，但会盖内容、破坏打印和读屏体验，属于典型“省事反坏事”。
为什么 footer 总是悬在半空？
这是浏览器默认行为，不是 bug。<footer> 是普通块级元素，DOM 位置虽在最后，但父容器（<body>）没设高度约束，也没启用空间分配机制，它就只能紧贴主内容末尾排布。页面内容短时，自然离视口底部一大截。
-
<html>和<body>都要设height: 100%（旧版 Safari 兼容刚需） -
<body>必须设display: flex; flex-direction: column; min-height: 100vh - 主内容区必须用
<main>标签，并加flex: 1（不能用<div>替代） -
<footer>放在<main>后、</body>前，不设height、不加position、不加margin-top
怎么写才合规又可访问？
版权信息必须是语义化、结构清晰、机器可读的内容，不是纯视觉装饰。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须闭合完整：
<footer>© 2024–2026 MySite</footer>，漏掉</footer>会导致后续所有 HTML 被吞进 footer 子树，JS 查不到节点，CSS 失效 - 必须是
<body>的直接子元素，不能嵌套在<div id="app">或<main>里 - 年份建议用区间（如
2024–2026）而非 JS 动态生成——避免 JS 未执行时空白、爬虫抓不到、禁用 JS 环境下失效 - 备案号必须带超链接：
<a href="https://beian.miit.gov.cn">京ICP备12345678号</a>，只写号码不算合规
多列链接或文字挤成一长条怎么办？
手机上 footer 里的平铺链接常溢出或强制横向滚动，本质是没做响应式流控。
立即学习“前端免费学习笔记（深入）”；
- 给链接容器（如
<div class="footer-links">）设display: flex; flex-wrap: wrap - 每个栏目列（如
<div class="footer-col">）用flex-basis: 30%，比width更稳，Flex 会自动处理间隙 - 在
@media (max-width: 768px)中设flex-direction: column或flex-basis: 100%，强制垂直堆叠 - 避免对
<small>强制重置font-size——它语义就是“附属细则”，改了反而破坏可访问性
真正难的不是写代码，而是想清楚：这个 footer 是文档逻辑结尾，还是视觉悬浮层？前者靠 flex 布局“撑到底部”，后者才用 position: fixed——而绝大多数版权栏，属于前者。
