浮动导航栏宽度溢出主因是父容器高度塌陷且子项总宽超100%，calc()需注意单位一致与box-sizing配合，flex方案更优因其天然避免塌陷、简化布局。
浮动导航栏宽度溢出的典型表现
当给 .nav-item 加了 float: left，又没控制父容器清除浮动或设置 overflow，常见现象是：导航栏撑破容器、右侧内容被顶到下一行、滚动条意外出现。根本原因不是“浮动本身宽”，而是浮动元素脱离文档流后，父容器高度塌陷，同时子项总宽度可能因边距/内边距叠加超过 100%。
calc() 计算单个浮动项宽度时的陷阱
calc() 确实能动态减去已知边距，但必须确保单位一致、括号嵌套合法，且不能用于百分比与像素混算时忽略渲染时机差异：
-
width: calc(25% - 20px)✅ 合法（百分比减像素） -
width: calc(100% / 4 - 10px)✅ 支持除法，但注意浏览器兼容性（IE9+） -
width: calc(25% - 10px - 10px)❌ 容易漏掉某个margin，导致累计误差 - 如果
.nav-item有border或padding，calc()结果需额外减去这些值，否则仍溢出
更稳妥的 calc + box-sizing 组合写法
直接用 calc() 控制每个项宽度，配合 box-sizing: border-box 把 padding/border 纳入宽度计算，避免重复扣减：
.nav-item {
float: left;
width: calc(25% - 2 * 12px); /* 4项，每项左右 margin 各 12px → 总共减 24px */
margin: 0 12px;
padding: 8px 16px;
box-sizing: border-box; /* 关键：让 padding 不撑宽 */
}
注意：2 * 12px 是因为左右 margin 各占一份，而 calc() 中不能写 2*12px（无空格会解析失败），必须加空格。
为什么现在更推荐 flex 替代 float 做导航栏
浮动方案在响应式、对齐、换行控制上太脆弱。比如加 flex 后，calc() 就不再是必需：
.nav-list {
display: flex;
flex-wrap: wrap;
}
.nav-item {
flex: 1 1 calc(25% - 24px); /* 自动分配，自动处理 margin */
margin: 0 12px;
box-sizing: border-box;
}
Flex 下 flex-basis 支持 calc()，且父容器不会塌陷、无需清除浮动、换行行为可控。IE10+ 支持良好，若需兼容 IE9 及以下才值得退回 float + calc 组合。
真正容易被忽略的是：浮动导航的“宽度溢出”往往不是宽度算错，而是忘了给父容器设 overflow: hidden 或 display: block 触发 BFC —— 这比调 calc() 公式更快解决问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
