浮动按钮宽度不一致的根源是box-sizing默认为content-box，导致width不包含padding和border；统一设为border-box可使width即实际占用宽度，配合flex布局更优。
浮动按钮宽度不一致的根源在 box-sizing 默认值
默认情况下，box-sizing 是 content-box，这意味着你设的 width: 100px 只算内容区，加上 padding 和 border 后实际占位会变宽。多个浮动按钮若 padding/border 不统一，或父容器宽度不够触发换行，就会出现视觉上“宽度不一致”——其实只是外盒尺寸不同导致对齐错乱。
必须给所有浮动按钮统一设置 box-sizing: border-box
这是最直接有效的解法。它让 width 包含 padding 和 border，数值即真实占用宽度，浮动排列时尺寸可控、行为可预测。
- 不要只写在某个按钮上，应全局重置：
*, *::before, *::after { box-sizing: border-box; } - 如果仅针对按钮，用更精确的选择器：
.btn { box-sizing: border-box; float: left; width: 80px; padding: 8px 12px; border: 1px solid #ccc; } - 注意：IE8+ 支持
box-sizing，但需加-webkit-前缀（仅旧版 Safari 需要），现代项目基本可忽略
float 本身不会导致宽度差异，但会放大尺寸计算误差
float 只是让元素脱离文档流左/右对齐，它不改变自身尺寸逻辑。但一旦多个浮动元素因 box-sizing 不一致或 margin 折叠异常造成外盒宽度浮动溢出，就容易被挤到下一行，看起来像“有的宽有的窄”。
- 检查是否有隐式 white-space 或 inline 元素干扰（比如按钮间有空格/换行，产生 4px 左右间隙）
- 确保父容器没有
overflow: hidden等意外截断（可能掩盖换行问题） - 浮动后记得清除，否则后续内容会上移 —— 推荐用
::after伪元素清除，而非额外 DOM 节点
更现代的替代方案：flex 替代 float + box-sizing 组合
如果目标浏览器支持 Flexbox（IE10+），用 display: flex 替代 float 能彻底绕过这类尺寸陷阱，且无需手动清浮，响应式也更自然。
立即学习“前端免费学习笔记（深入）”；
.btn-group {
display: flex;
gap: 8px; /* 替代 margin 控制间距 */
}
.btn {
box-sizing: border-box; /* 仍建议保留，尤其含 padding/border 时 */
flex: 0 0 auto; /* 不伸缩，保持设定宽度 */
width: 80px;
padding: 8px 12px;
border: 1px solid #ccc;
}真正难处理的不是 box-sizing 或 float 单独的问题，而是两者混用时，开发者误以为“float 控制了布局”，却忽略了尺寸计算才是浮动对齐稳定的前提。只要外盒尺寸不可控，再怎么调 float 也没用。
