页脚需用flex或grid布局实现多栏响应式，禁用float；必须加flex-wrap: wrap或grid-template-columns配合断点；每列用ul包裹链接以保障可维护性、无障碍和深色模式适配。
页脚用 footer 包裹但必须配 CSS 布局
只写 <footer></footer> 不会自动分栏，浏览器默认把它当普通块级容器，所有子元素垂直堆叠、无间距、不换行。小屏下尤其容易文字挤成一团或横向溢出。
必须手动加布局控制：推荐用 display: flex 或 display: grid，别用 float——清除浮动的坑在页脚里更难调试，且现代项目已无 IE9 兼容压力。
-
flex适合栏目数量可能变化（比如运营临时增删“合作伙伴”列）的场景 -
grid更适合固定栏目数（如“关于我们｜服务支持｜法律条款｜关注我们”四列），代码更直观，不用算百分比 - 无论选哪种，
footer内部别再嵌套nav——页脚链接不是主导航，语义冗余还增加样式干扰
flex-wrap: wrap 是三列变一列的关键
很多人写 display: flex 后发现小屏下内容被压缩、文字重叠甚至横向滚动，根本原因是没加 flex-wrap: wrap。Flex 默认是单行不折行，超出就溢出。
正确做法是显式声明换行，并用 flex-basis 控制每列宽度：
- 设
.footer-col { flex-basis: 30%; }比width: 30%更稳——它让 Flex 容器优先按比例分配空间，剩余间隙自动均分 - 移动端断点建议用
@media (max-width: 768px)，此时设flex-basis: 100%让每列独占一行 - 用
gap: 2rem控制列间距，比手动加margin更干净，且不会影响第一列左距或最后一列右距
grid-template-columns: repeat(3, 1fr) 更适合固定栏目数
如果页脚栏目稳定在三列或四列，Grid 比 Flex 更省心：不用操心换行逻辑，也不依赖 flex-wrap 的隐式行为。
直接写：
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 768px) {
.footer-links {
grid-template-columns: 1fr;
}
}
注意两点：
- 别在 Grid 容器里混用
float或inline-block，会导致渲染错乱，尤其动态插入新列时 - 旧版 Safari（iOS 10.3 之前）不支持 Grid，可加
@supports (display: grid)回退到 Flex，别裸奔
每列必须用 ul 包链接，不是为了语义而是为了可维护性
把链接平铺在 div 里看着省事，但一旦要加栏目标题、统一缩进、批量改颜色或做键盘焦点管理，立刻抓瞎。
结构应该长这样：
<div class="footer-col">
<h3>关于我们</h3>
<ul>
<li><a href="/about">公司简介</a></li>
<li><a href="/team">团队介绍</a></li>
</ul>
</div>
这样做的实际好处：
-
ul天然带上下边距和缩进，比手写margin更可控 - 用
a:focus加高亮时，整个li可设outline或背景色，比单个a更易点击 - WCAG 要求链接文字对比度 ≥ 4.5:1，用
ul结构后，可以统一给li a设颜色，避免漏掉某列
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
