float布局下25%宽度不等宽的主因是空白符占位、未重置box-sizing及未清除浮动；应设父容器font-size:0、子项box-sizing:border-box，并用伪元素清除浮动；现代布局推荐flex或grid。
float布局下25%宽度不等宽的常见原因
直接写 width: 25% + float: left 很容易发现四列加起来超出了容器宽度，最后一列掉到下一行。这不是你算错了，而是浏览器默认会把元素间的空白符（换行、空格）解析为一个空格字符，它会占据约 4px 宽度——四列就多出约 16px，再加上边框、内边距没归零，很容易溢出。
解决思路不是调小百分比，而是从根源上消灭不可见的宽度来源：
- 给父容器设置
font-size: 0，再给子元素单独设font-size（防文字消失） - 或把所有
<a></a>标签写在 HTML 同一行，消除换行符 - 务必重置
margin、padding、box-sizing：所有子项加box-sizing: border-box，否则padding会让实际宽度超过 25%
float多列必须清除浮动，否则页脚塌陷
用 float 的元素会脱离文档流，父容器高度会变成 0，导致后续的页脚直接叠在链接上面——这是最常被忽略的后果，不是“看起来怪”，而是真实布局断裂。
推荐用伪元素清除，兼容性好且不污染 HTML：
立即学习“前端免费学习笔记（深入）”；
.footer-links::after {
content: "";
display: table;
clear: both;
}
别用 overflow: hidden 强制触发 BFC，它可能意外裁剪阴影、下拉菜单等溢出内容。
现代替代方案：float已不推荐用于多列布局
虽然 float 能实现，但它本质是为图文环绕设计的，强行用于布局会带来清除、塌陷、响应式适配困难等问题。真正该用的是：
-
display: flex：父容器加display: flex，子项自动等分，无需计算百分比，无塌陷风险 -
display: grid：grid-template-columns: repeat(4, 1fr)更直观，还支持响应式断点重排
如果你必须兼容 IE9 及以下，float 是无奈之选；但只要支持 IE10+，优先用 flex——它没有“为什么又掉行了”的调试时间消耗。
移动端适配时 float的致命缺陷
width: 25% 在小屏上根本撑不开四列，用户得左右滑动，体验极差。而 float 本身不提供断点控制能力，你只能靠媒体查询手动改成 width: 50% 或 100%，还得同步处理清除方式、字体大小、间距……一改就是六七处。
用 flex 就简单得多：
.footer-links {
display: flex;
flex-wrap: wrap;
}
.footer-links a {
flex: 1 1 25%;
}
@media (max-width: 768px) {
.footer-links a { flex-basis: 50%; }
}
@media (max-width: 480px) {
.footer-links a { flex-basis: 100%; }
}
flex-basis 可以动态调整，不需要重复清除浮动逻辑，也不用担心换行符干扰。
真正难的不是写出四列，而是让它们在各种设备、各种内容长度、各种缩放比例下都稳住位置。float 把这个责任全推给了开发者，而现代布局属性把它收走了。
