本质是盒模型未统一，必须对所有浮动子元素显式设置box-sizing:border-box，因父容器的box-sizing只影响自身宽高解析，不控制子元素占位；子元素总宽度（含margin）超100%、父容器未触发BFC导致高度塌陷、混用width与flex属性等亦会引发错位。
浮动容器宽度计算错误，本质是盒模型没统一，box-sizing 必须设对位置、设全范围，否则修了也白修。
为什么只给父容器设 box-sizing: border-box 不管用
浮动布局里，真正参与并排计算的是子元素（比如多个 .item），不是父容器。父容器的 box-sizing 只影响它自己宽高的解析逻辑，跟子元素怎么占位毫无关系。
常见错误现象：父容器加了 box-sizing: border-box，但子项仍因 padding 和 border 撑出设定宽度，导致换行或错位。
- 必须对所有浮动子元素显式设置
box-sizing: border-box，哪怕它们样式来自不同选择器 - 全局重置最稳妥：
* { box-sizing: border-box; }，但要确保它在所有样式表最前面加载 - 若用组件库（如 Ant Design、Element UI），检查其内部是否覆盖了该规则——有些库会重置为
content-box，得针对性再覆盖
box-sizing: border-box 配合浮动时的三个硬约束
设了 border-box 只是前提，不是终点。浮动排列稳定还需满足三件事：
- 所有浮动子项的
width值加起来不能超 100%，且必须把margin算进去（box-sizing不管margin） - 父容器必须能“看见”浮动子项的高度，否则百分比宽度按塌陷后的 0 计算——得用
display: flow-root或::after清除浮动 - 避免在浮动子项上混用
width和flex相关属性（如flex-basis），浮动下这些属性被忽略，但开发者可能误以为生效，导致调试错乱
IE8–IE11 下 box-sizing 的兼容写法别漏前缀
虽然现代项目基本不考虑 IE8，但维护老系统时，box-sizing 在 IE8–IE9 中需带前缀，否则直接失效。
错误写法：box-sizing: border-box;（IE8 下被忽略）
正确写法：
button, input, .float-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-
-webkit-主要为旧版 Safari/Android Browser；-moz-是 Firefox 28 及更早版本必需 - 不要只写
-webkit-就以为覆盖全了，Firefox 28 用户仍会遇到尺寸错乱 - 如果用 Sass/Less，确认你引入的
box-sizingmixin 是否包含-moz-前缀，很多现代脚手架已默认移除
当 box-sizing + 浮动还是不准，先停手查这三处
不是所有宽度问题都出在 box-sizing。以下三处才是真·高发盲区：
- 父容器有
font-size: 0用来消灭 inline 元素间隙？它会让calc(100% / 3)报错（CSS 不支持除法运算符/在表达式中），而你可能根本没注意到控制台报了无效声明 - 子项之间存在 HTML 空格或换行符，产生约 4px 的隐式间隙，叠加
border后实际多出 6px，足够让第三列掉行 - 用了
outline当边框？outline不参与盒模型计算，不会被box-sizing管控，但它视觉上占位，容易误判为“宽度超了”
浮动本身不难，难的是它把所有尺寸计算漏洞都放大成可见错位。你调的不是 float，是在校准整个盒模型链路的精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
