页脚多列布局应使用 display: grid 而非 float，因其更干净、响应式友好；推荐 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，版权声明需单独包裹并用 border-top 分隔，IE11 需降级为 flex 布局。
页脚多列布局用 display: grid 还是 float？
现在别用 float 做页脚多列，它会触发 BFC、影响后续清除逻辑，且响应式断点难控制。用 display: grid 是更干净的选择，尤其当列数固定（比如三列：公司信息 / 快捷链接 / 联系方式）时。grid-template-columns: repeat(3, 1fr) 能均分宽度，但注意：如果某列内容超长（比如一堆 a 标签没换行），可能撑开整列，破坏对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给页脚容器设
display: grid和grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，兼顾响应式与内容自适应 - 每列内部用
display: flex+flex-direction: column管理标题和列表项，避免margin-top乱飘 - 禁止给列容器设
width百分比——这会让grid失效，改用minmax()或fr单位
margin-bottom 撑不开页脚，但页面底部留白又不够？
常见现象：页脚元素明明写了 margin-bottom: 40px，可它紧贴视口底边，下方没空隙；或者整个页面高度不足一屏，页脚“悬浮”在中间。这不是 margin 的问题，而是父容器（比如 body 或主 div）没撑满视口高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
html和body都设了height: 100%，否则min-height: 100vh在子元素上无效 - 页脚本身不用
position: absolute，除非你明确要“粘底”——这时得配合body { display: flex; flex-direction: column }和主内容区flex: 1 - 版权声明行（通常单行居中）必须单独包裹，不要和多列区域混在同一个
grid容器里，否则会被拉伸或错位
版权声明文字居中但和上面多列不对齐，怎么办？
多列区域底部边缘参差不齐（比如“联系方式”列最短，“公司信息”列最长），而下方的版权行用了 text-align: center，视觉上就感觉“偏右”或“下沉”。这不是居中错了，是参照系错了——它按整个页脚容器宽度居中，但人眼默认以多列区域的视觉重心为基准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把版权声明单独提一层 DOM，放在页脚容器外（但仍在
footer标签内），并用border-top分隔，而非margin-top - 如果必须同容器内布局，给多列区域加
align-items: end，让所有列底部对齐，再让版权行用grid-column: 1 / -1跨全列 - 避免用
line-height做垂直居中——字体渲染差异会导致不同浏览器位置偏移 1px
IE11 下页脚 grid 布局完全失效？
display: grid 在 IE11 只支持旧语法（display: -ms-grid），且不支持 repeat()、auto-fit 等现代写法。一旦用了，IE11 直接回退到块级堆叠，三列变一列，版权行跑飞。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不为 IE11 写两套 grid ——成本高、易出错。改用
display: flex降级：主容器flex-wrap: wrap，列元素flex: 0 0 calc(33.333% - 20px)，手动算间隙 - 用
@supports (display: grid)包裹现代写法，IE11 自动跳过 - 版权声明行在 IE11 中务必用
text-align: center+width: 100%，别依赖 grid 跨列
页脚看似简单，但多列高度不一致、浏览器对 grid 支持度分裂、以及“居中”在不同上下文里指代不同参照物——这些地方一不留神，视觉就出岔子。
