页脚多栏小屏堆叠是预期行为，应优先用flex布局并显式声明flex-wrap: wrap；语义上需用<nav><aside><footer>等语义化标签，标题必须为真实heading，确保键盘Tab顺序与DOM一致。
页脚多栏在小屏上堆成一列，不是bug，是预期行为；关键不在“怎么让它换行”，而在“换行时别把语义和可访问性搞丢”。
用 flex 还是 grid 控制页脚多栏？
优先选 flex：页脚内容通常为线性导航、联系信息、版权文字等，天然适合主轴排列。用 grid 反而容易因隐式轨道破坏语义顺序（比如用 grid-template-areas 把“关于我们”拖到“联系方式”左边，DOM 顺序却没变）。
例外情况只有一种：页脚里嵌了真正需要二维对齐的模块，比如“服务列表 + 对应图标 + 简短说明”三列并排且每列高度需拉齐——这时才用 display: grid，并配 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。
-
flex-wrap: wrap必须显式声明，否则小屏下项目会溢出或强制缩小 - 别设
flex-direction: column做响应式切换——这会让 DOM 顺序和视觉顺序彻底不一致，屏幕阅读器会读错 - 移动端用
flex-direction: row+flex-wrap: wrap，靠min-width和flex-basis控制换行点，比媒体查询硬切更稳
flex-wrap 换行后间距错乱、最后一行对不齐？
这是 justify-content: space-between 在换行时的固有缺陷：它只对当前行生效，最后一行只剩一个子项时，它会被挤到最左，看起来像“漏了一块”。
立即学习“前端免费学习笔记（深入）”；
- 改用
justify-content: flex-start+gap: 1.5rem（现代浏览器支持），gap对所有行生效且不依赖 justify 行为 - 若需兼容旧版 Safari（iOS 14.5 以下），用
margin-right模拟 gap，但必须给最后一项加margin-right: 0类或伪类排除 - 避免用
text-align: center居中整行——它会让每个flex-item内部文字居中，但 item 本身仍左对齐，视觉混乱
响应式断点里，flex 和 float 别混用
有些老项目页脚还残留 float: left 的写法，一旦在媒体查询里只改 flex 不清 float，就会出现“部分项目浮动、部分 flex 排列”的错位。
- 检查 DevTools 的 Computed 面板，确认
float值是否已重置为none - 清除浮动不能靠
overflow: hidden—— 它在安卓 WebView 中可能裁剪图标或 SVG - 统一用
display: flex后，clear属性完全失效，删掉所有clear: both相关规则 - 如果必须兼容 IE11，用
display: -ms-flexbox而非float回退
语义和可访问性最容易被忽略的点
多栏页脚常被写成 <div class="footer-col"> 堆砌，但屏幕阅读器根本不知道这是导航还是纯信息区块。
- 用
<nav aria-label="页脚快速导航">包住链接栏，用<aside>包住联系方式，用<footer>作为最外层容器 - 每栏标题必须是真实 heading（
<h2>或<h3>），不能靠 CSS 视觉模拟——否则 JAWS/NVDA 不会将其识别为结构节点 - 小屏堆叠后，确保键盘 Tab 顺序仍按 DOM 顺序从左到右、从上到下流动，不要用
order打乱
真正难的不是让四栏变一栏，而是变完之后，盲人用户仍能凭直觉知道“第一栏是导航，第二栏是地址，第三栏是社交媒体”，而不是靠猜。
