缩放后浮动导航栏折行是因box-sizing: content-box下百分比宽度叠加padding/border导致视觉总宽超标，需全局设box-sizing: border-box或改用flex布局。
为什么缩放后浮动导航栏突然折行
根本不是“浏览器变卡了”，而是 box-sizing: content-box + 百分比宽度 + 缩放时亚像素四舍五入共同导致的视觉总宽超标。比如两个 float: left 的 .nav-item 各设 width: 50%，再加 padding: 8px 和 border: 1px，实际每项总宽≈50.03%，100%缩放时四舍五入刚好压线，一拉到125%，就变成51%+51%＞100%，右侧项直接掉行。
必须全局统一 box-sizing: border-box
只给导航项加没用，父容器也得同步改——否则它的 padding 会偷偷吃掉子项可用宽度。最省事的做法是开头就写：
* {
box-sizing: border-box;
}
如果项目有历史包袱不能动全局，至少确保这三者都显式声明：
-
.nav-container（导航外层容器） -
.nav-item（每个菜单项） - 所有可能参与浮动的子元素，比如
img、button、span
特别注意：表单控件如 input 默认仍是 content-box，若混在导航里，容易成为错位源头。
别碰 min-width，它对缩放折行完全无效
min-width: 768px 这类写法看似“兜底”，实则毫无作用：
- 它不干预百分比计算，
width: 50%依然会算出超限值 - 它不修正
padding/border在content-box下额外叠加的行为 - 设在父容器上，只是防止容器变窄；设在子项上，反而可能让某一项“卡死”，把另一项挤下去
真正该检查的是：.nav-container 是否有 padding 或 border？是否用了 max-width: 99.9% 这种临界值？缩放后小数取整波动会被放大。
现在就该换掉 float
浮动本就不该承担响应式布局职责。缩放错位只是表象，背后是整个布局机制已过时。直接升级为：
.nav-container {
display: flex;
flex-wrap: wrap;
}
.nav-item {
flex: 0 0 auto; /* 不伸缩、不压缩，按内容定宽 */
white-space: nowrap;
}
这样既保留单个菜单项内文字不折行（靠 white-space: nowrap），又允许整行在空间不足时自动换行堆叠（靠 flex-wrap: wrap）。比任何 calc() 扣减、margin-right: -4px 魔法数字都可靠——因为不再依赖亚像素精度。
最后提醒一句：DevTools 里看 “Computed” 面板的总宽度，不是看写的 width，而是把 width + padding + border + margin 全加起来核对。这个动作，比调十次 min-width 都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
