根本原因是box-sizing默认content-box导致宽度假设与实际渲染偏差，混入padding/border后真实宽度增大，叠加浏览器字体渲染差异易触发换行；须全局设* { box-sizing: border-box; }并统一line-height等排版属性。
浮动元素在不同浏览器下宽度不一致，根本原因不是浏览器渲染引擎差异，而是box-sizing默认值不统一导致的计算偏差——所有现代浏览器都默认用content-box，但一旦混入padding或border，实际占宽就悄悄变大，而开发者工具里常只盯着width看。
为什么content-box会让浮动宽度“忽大忽小”
你写width: 200px; padding: 10px; border: 1px solid #000;，在content-box下，这个元素真实宽度是200 + 10×2 + 1×2 = 222px。不同浏览器对字体渲染、行高、内联元素基线的处理略有差异，微小的像素级偏差在浮动并排时会被放大——尤其当总和逼近父容器宽度临界点时，某一个浏览器就可能触发换行，看起来像“宽度不一”。
- IE8–IE11 和旧版 Safari 对
box-sizing支持不一致，未显式声明时行为更不可控 - 开发者工具里看到的“Computed width”是最终渲染值，但“Declared width”仍显示 200px，容易误判
- 如果父容器用了
padding（比如padding: 16px），而子浮动项没做宽度补偿，实际可用空间就少了 32px，更容易溢出
必须全局设box-sizing: border-box，且不能只靠选择器覆盖
局部加.float-item { box-sizing: border-box; }不够——浮动布局中，常有嵌套的按钮、图标、文字容器，它们的padding和border也会参与整体宽度计算。只要有一个子元素漏掉border-box，就可能成为换行诱因。
- 最稳妥写法是
* { box-sizing: border-box; }，从根上切断尺寸歧义 - 若项目已有重置样式（如 normalize.css），检查它是否覆盖了
*规则；有些框架会把box-sizing限制在html或body下，不生效 - 不要用
inherit代替border-box，因为inherit会继承父级值，而父级很可能还是content-box
width值必须显式、可计算，不能依赖内容撑开
浮动元素不设width时，浏览器按内容宽度自动计算，而内容宽度受font-family、font-size、甚至系统字体渲染（如 macOS 的 subpixel antialiasing）影响，跨浏览器必然不一致。
- 等分布局别用
width: 33.333%——浮点精度在某些浏览器（如旧版 Edge）下会累积误差，建议用calc(100% / 3)或整数百分比+box-sizing: border-box兜底 - 含
padding和border时，直接写width: calc(33.333% - 2px)比靠margin负值调整更可靠 - 避免
width: auto+min-width组合用于浮动项，auto会退回到内容宽度逻辑，失去可控性
真正容易被忽略的是：浮动本身不控制对齐，只是“偏移”
即使box-sizing统一、width精确，如果浮动项内文本的line-height、vertical-align或font-size不一致，视觉上依然“对不齐”。这不是宽度问题，而是基线错位——浮动元素的top位置由第一行文本的基线决定，而不同浏览器对baseline的判定存在细微差别。
所以检查宽度前，先确认所有浮动项的line-height、font-size、vertical-align是否完全相同；否则，哪怕box-sizing再统一，也救不了视觉错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
