应使用语义化配合flex布局实现底部版权栏，而非表格；因表格不语义、不可控、易悬空或重叠，且破坏文档流、干扰屏幕阅读器、打印错乱、无法响应式撑满视口高度。
别用表格实现底部版权栏——它既不语义、也不可控，还容易在内容少时悬空或内容多时重叠。 表格布局（<table>）本就不是为页面级结构设计的，强行用 <code><tr><td> 套出“底部”，会破坏文档流、干扰屏幕阅读器、让打印样式错乱，且无法响应式撑满视口高度。
<h3>为什么表格做页脚会出问题</h3>
<p>常见错误是把整个页面包进一个 <code><table height="100%">，再塞个 <code><tr><td><footer>...</footer></td></tr> 在最后。结果：
-
height="100%"在多数浏览器里根本无效，因为父容器（/）没显式设高 - 表格单元格默认
vertical-align: middle，版权文字常卡在中间而非贴底 - 内容区域高度变化时，表格不会自动分配剩余空间，footer 位置飘忽
- 移动端 viewport 缩放、键盘弹出后，
vh失准，但表格毫无感知能力
用 <footer></footer> 标签 + Flex 布局才是正解
现代标准做法是放弃表格，改用语义化 <footer></footer> 配合 CSS Flexbox。核心不是“怎么写 footer”，而是“怎么让 body 容器主动撑高并分配空间”：
-
和都要设height: 100%（老版 Safari 兼容必需） -
加display: flex; flex-direction: column; min-height: 100vh - 主内容区必须是
<main></main>或带class="content"的<div>，且设 <code>flex: 1 -
<footer></footer>放在该主内容区之后，不加position、不设固定height、不写margin-top -
或外层有margin/padding（尤其用了 Normalize.css 后常漏清body { margin: 0 }） -
<footer></footer>父元素（比如某个<div class="wrapper">）设了 <code>max-width或margin: 0 auto，导致它实际宽度不足 - 版权文字被包在多个
<div> 里，而 <code>text-align只影响行内内容；此时应给<footer></footer>加display: flex; justify-content: center真正难的不是让文字出现在底部，而是让这个“底部”始终是文档流末端——既不遮正文，也不悬半空，更不依赖 JS 计算高度。表格做不到这点，
position: fixed也做不到，只有 Flex 布局能稳定交付。
文字居中/对齐失效的典型原因
写了 text-align: center 却发现版权文字还是偏左？不是 CSS 写错了，而是容器没占满：
