浮动元素宽度溢出的典型表现是多个float: left元素并排时换行或撑破容器，主因是box-sizing: content-box将padding和border计入width之外，须对浮动元素显式设box-sizing: border-box。
浮动元素宽度溢出的典型表现
当多个 float: left 元素并排时，即使你写了 width: 50%，它们仍可能换行或撑破容器——尤其在加了 padding 或 border 后。这是因为默认的 box-sizing: content-box 把 padding 和 border 算在 width 外面，实际占用宽度变成 width + padding-left + padding-right + border-left + border-right。
box-sizing: border-box 必须显式设置
仅写 * { box-sizing: border-box } 不够可靠：某些框架、重置样式或内联样式会覆盖它；float 元素又常被嵌套在未重置的父容器里。必须对浮动元素本身（或其直接父容器）明确声明：
div.float-item {
float: left;
width: 50%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box; /* 关键：必须写在这里 */
}- 不依赖全局通配符，避免被第三方 CSS 干扰
- 如果用预处理器（如 Sass），建议在浮动组件的局部作用域内定义
-
box-sizing: border-box对float无副作用，但对display: table-cell或flex子项行为不同，别误迁移到其他布局上下文
浮动 + border-box 仍溢出？检查这些点
即使加了 box-sizing: border-box，以下情况仍会导致溢出：
- 父容器有
padding或margin，而子元素的width: 50%是按父容器content box宽度计算的——若父容器本身没设box-sizing: border-box，它的padding会进一步压缩可用空间 - 存在未清除的浮动（
clear: both缺失），导致父容器高度塌陷，视觉上像“溢出”实则是布局错乱 - 字体、行高、内联元素（如空格、换行符）产生不可见的间隙，尤其在
font-size: 0未处理时，多个float: left的inline-block模拟场景中更明显 - 使用了
calc()计算宽度但漏减gap，比如width: calc(50% - 1px)却忘了还有左右padding
替代方案比死磕浮动更稳妥
纯浮动布局在现代项目中已非首选。如果你只是想实现等宽并排且防溢出：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex替代：父容器设display: flex，子项用flex: 1或flex: 0 0 50%，自动忽略box-sizing边界问题 - 用
display: grid：grid-template-columns: 1fr 1fr更直观，响应式也更容易控制 - 若必须兼容 IE8–9，浮动仍是唯一选择，但务必配合
box-sizing: border-box+clearfix+ 显式width计算（含所有边距）
浮动不是不能用，但它对宽度容错率低；box-sizing: border-box 是必要条件，不是万能解。真正容易被忽略的是：浮动元素的 margin 折叠、父容器的 overflow 隐藏策略、以及是否真的需要浮动——很多时候问题不在怎么修溢出，而在该不该用浮动。
