页脚需用 grid 或 flex 布局控制列数与换行，避免 float 和裸写；grid 适合固定栏目，flex 更适配动态增删；必须兼顾可访问性与深色模式适配。
直接用 display: grid 或 display: flex 配合 flex-wrap: wrap，别碰 float，也别裸写 <footer></footer> 就完事——浏览器不会自动分栏，不加布局控制，小屏下必然文字挤成一行或横向滚动。
为什么 footer 默认不显示多列？
<footer></footer> 只是语义容器，不是布局引擎。它默认是块级元素，子元素垂直堆叠、无间距、无换行逻辑。你往里塞 5 个 <div>，它们就老老实实从上到下排，哪怕屏幕只有 320px 宽。
<ul>
<li>常见错误现象：页脚链接在手机上横向溢出，必须左右拖动才能看完；标题和链接重叠；列宽忽大忽小，对不齐</li>
<li>根本原因：没声明布局方式，也没设换行或列宽约束</li>
<li>别指望 <code>nav 嵌套能解决——页脚链接不是主导航，<nav></nav> 语义冗余，还可能干扰样式继承
用 grid 实现固定列数的响应式页脚
适合栏目稳定（如“关于我们｜服务支持｜法律条款｜关注我们”）的场景，代码简洁、列宽可控、无需手动算百分比。
- 核心写法：
grid-template-columns: repeat(3, 1fr)表示三等分，内容再多也不会撑破容器 - 列间距统一用
gap: 1.5rem，比margin更干净，不塌陷也不影响首尾对齐 - 移动端断点直接改列数：
@media (max-width: 768px) { grid-template-columns: 1fr; }，所有列垂直堆叠 - 旧版 Safari（iOS 10.3 之前）不支持 Grid，加
@supports (display: grid)包裹，否则裸奔会完全失效
用 flex 实现动态列数的页脚（栏目可能增删）
适合运营频繁调整栏目（比如临时加“合作伙伴”“下载中心”）的项目，靠 flex-wrap: wrap 自动折行，更灵活。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
flex-wrap: wrap，否则默认单行，超出就溢出 - 用
flex-basis: 30%控制单列宽度，比width: 30%更稳——Flex 容器会按比例分配空间，剩余间隙自动均分 - 移动端设
flex-basis: 100%让每列独占一行，避免用display: block覆盖，那会破坏 Flex 上下文 - 每列必须用
<ul></ul>包链接，不是为了“语义正确”，而是为了后续加<h3></h3>标题、统一批量改颜色、键盘焦点管理时不至于重写结构
容易被忽略的细节：可访问性与深色模式适配
页脚不是装饰，是用户找联系方式、查隐私政策的地方。键盘 Tab 切换不到、文字看不清、焦点看不见，等于功能残缺。
-
a:link和a:visited必须颜色不同（比如#0066cc和#551a8b），否则用户无法判断是否已点过某链接 - 移除下划线可以，但得确保颜色对比度 ≥ 4.5:1，用 DevTools 的无障碍面板实时检查
- 深色模式下，如果页脚背景是深灰或黑色，链接文字不能用纯灰（如
#666），得调亮或加描边 - 别在
<footer></footer>上全局设font-size: 0.9em就完事——小屏下文字太小，反而难读；应配合媒体查询微调
