页脚导航不该用<nav>包裹，应使用<footer>+<div class="footer-links">；固定列数优先CSS Grid，动态列数选Flex；移动端需成对设置display: flex和flex-wrap: wrap；链接须满足颜色区分、对比度≥4.5:1、显眼:focus样式。
页脚导航该不该用 <nav> 包裹
不该硬套。页脚链接多数属于辅助导航（如“隐私政策”“网站地图”），语义上不属于主导航流，直接套 <nav> 反而干扰屏幕阅读器对主菜单的识别。用 <footer> + <div class="footer-links"> 更轻量、更可控，也避免多个 <nav> 造成 ARIA 逻辑混乱。
多列布局用 Flex 还是 Grid？看列数是否固定
列数稳定（比如固定 4 栏：公司、支持、法律、社交），优先用 CSS Grid：grid-template-columns: repeat(4, 1fr) —— 不用算百分比，不依赖换行逻辑，容器内内容再多也不会撑破。列数动态（比如 CMS 后台可增删栏目），选 Flex：flex-wrap: wrap + flex-basis: 22%（留出 gap 余量），否则子项宽度会因内容长度不均而错位。
别混用：display: grid 容器里塞 float 或 inline-block 子项，Safari 旧版和动态插入内容时极易渲染错乱。
移动端堆叠失效？检查 flex-wrap 和断点值
常见错误是只写了 display: flex 却漏掉 flex-wrap: wrap，导致小屏下所有列强行挤在一行，溢出或触发横向滚动。正确写法必须成对出现：
立即学习“前端免费学习笔记（深入）”；
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.footer-col { flex-basis: 30%; }
@media (max-width: 768px) {
.footer-col { flex-basis: 100%; }
}
断点设在 768px 是通用底线，但若页脚文字较多或图标密集，建议提前到 640px 并同步调小 font-size 和 padding，否则文字会糊在一起。
链接可访问性常被忽略的三个细节
-
a:link和a:visited必须颜色不同（如#1a73e8/#5f6368），否则用户无法判断是否点过“服务条款” - 移除下划线可以，但得确保文字与背景对比度 ≥ 4.5:1 —— 用 Chrome DevTools 的无障碍检查器实测，深灰文字配深色页脚背景大概率不合格
-
:focus样式必须显眼（如outline: 2px solid #1a73e8），键盘用户 Tab 切换时若看不见焦点，等于关闭了半数可访问入口
flex-wrap —— 这三处一错，小屏崩、残障用户卡住、SEO 结构标记失真，问题全在上线后才暴露。 
