footer在长页面“浮”在半空是因为浏览器将其视为普通块级元素，dom顺序虽在最后，但body未设min-height:100vh和flex布局，导致无高度约束而自然排布；需设html/body height:100%、body display:flex+column、main flex:1，footer作为body直接子元素且不加定位才可真正沉底。
footer 为什么在长页面里“浮”在半空？
不是 footer 写错了，是它被当成普通块级元素对待了——DOM 顺序在最后，但 CSS 没给父容器设约束，浏览器就按内容高度自然排布。长页面时，footer 紧贴正文末尾；短页面时，它悬在视口中间，这是默认行为，不是 bug。
根本问题在于：body 没有最小高度，也没启用空间分配机制。指望 position: fixed 或 margin-top: auto 单独起效，基本都会翻车。
-
html和body都必须设height: 100%（旧版 Safari 兼容刚需） -
body设display: flex; flex-direction: column - 主内容区域必须用
<main></main>标签（语义+布局双重需要），并设flex: 1 -
footer放在<main></main>后面，不加 height、不加 position、不加 margin-top
为什么不能直接给 footer 加 position: fixed？
加 position: fixed; bottom: 0; 看似一劳永逸，实际会破坏三件事：文档流、可访问性和打印输出。
典型现象包括：
- 内容少时，
footer盖住正文最后一段文字 - 内容长时，
footer始终悬浮在视口底部，不随滚动到底，用户拉到底部才看到“版权信息被截断” - 屏幕阅读器跳过
footer，因为它脱离了 DOM 顺序 - 打印 PDF 时，
footer只出现在第一页底端，后面页没它
如果你真需要固定底栏（比如全站操作按钮），请确认这是设计需求，并手动为 <main></main> 加 padding-bottom（值 ≥ footer 高度），而不是让版权栏也这么干。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
如何让版权年份自动更新又不影响 SEO？
用 JS 动态写 document.write 或 innerHTML 更新年份，对爬虫不友好——首次渲染时看到的是占位符或旧年份，结构化数据提取失败。
更稳妥的做法是：
- 构建时生成（如 Vite 插件、Webpack DefinePlugin 注入
new Date().getFullYear()） - 服务端模板直接输出（如 PHP 的
© = date('Y') ?>） - 若必须前端 JS 控制，请用
textContent修改已有<span id="copyright-year"></span>，且确保初始 HTML 中已含真实年份（防 JS 失效）
别用 © 2024–<script>document.write(new Date().getFullYear())</script> 这类内联脚本——既难维护，又干扰 SSR 和缓存策略。
footer 里链接要不要加 rel="noopener"？
要，但只对 target="_blank" 有效。版权栏常见外链是备案号（https://beian.miit.gov.cn）、许可证文件（rel="license"）或社交媒体。
- 所有
target="_blank"的链接都应加rel="noopener"（安全强制项，防 window.opener 泄露） - 指向许可证的链接，用
rel="license"—— 但目标 URL 必须是真实可访问的 .txt 或 .html 文件，否则是语义滥用 - 备案号链接不用
rel，但建议加aria-label="工信部备案查询"提升无障碍体验
容易被忽略的是：同一 footer 里混用多种 rel 值时，多个属性要用空格分隔，不是逗号——rel="noopener license" 才对，rel="noopener, license" 会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
