CSS中box-sizing如何避免浮动列宽溢出

box-sizing: border-box 必须显式设在浮动元素自身上，仅设父容器无效；需配合 font-size: 0 或 calc() 消除空白与精度问题；高度塌陷须靠 BFC 解决，box-sizing 无法修复。

浮动元素宽度相加超100%就换行？box-sizing必须设在它自己身上

只给父容器设 box-sizing: border-box 没用，浮动子元素仍按默认的 content-box 算尺寸。比如两个 width: 50% 的浮动块，若各自有 padding: 10px 和 border: 1px，实际总宽就是 50% + 50% + 22px —— 必然换行或横向溢出。

必须把 box-sizing: border-box 显式加到每个浮动元素上，例如：

.col-50 {float: left;width: 50%;padding: 12px;border: 1px solid #ddd;box-sizing: border-box; /* 关键：写在这里 */}

1. 别依赖通配符重置——第三方组件或表单控件（input、textarea）可能被漏掉
2. Bootstrap 4 不带全局 box-sizing 重置，得手动补 * { box-sizing: border-box } 并确保放在所有样式之前
3. IE8 需加 -ms-box-sizing: border-box，但现代项目通常可忽略

浮动列之间莫名有缝隙？空白字符和像素四舍五入也在加宽

即使 box-sizing 正确，width: 50% + width: 50% 还是换行，大概率是 HTML 源码里的换行/空格被渲染成约 4px 间隙，或者浏览器对小数百分比四舍五入导致总和略超 100%。

1. 父容器设 font-size: 0 消除空白字符间隙，子元素再单独设字号
2. 用 calc(50% - 1px) 替代纯百分比，留出容错空间
3. 避免混用固定像素和百分比，比如 width: calc(66.666% - 2px) + width: 33.333% 容易因计算精度错位
4. 更稳妥的替代方案：改用 display: flex，让 flex: 1 自动均分，彻底绕过浮动宽度陷阱

浮动父容器高度塌陷，box-sizing压根不解决这事

box-sizing: border-box 只影响单个元素的尺寸计算，对父容器是否包含浮动子元素毫无作用。父容器高度塌陷，是因为浮动元素脱离文档流，父容器“看不见”它们。

1. 触发 BFC 是正解：给父容器加 overflow: hidden 或 overflow: auto（注意不是 visible）
2. display: flow-root 更语义化，但 IE 完全不支持
3. 伪元素清除法：::after { content: ""; display: table; clear: both; } 兼容性最好
4. 别指望 box-sizing 能修复高度问题——它连边框都管不了，更别说布局流了

调试时最常被忽略的三件事

写了 box-sizing: border-box 却没生效，往往不是语法错，而是被覆盖或没落到目标元素上。

1. 进开发者工具「Computed」面板，直接查目标元素的 box-sizing 值是不是 border-box，别只信源码写了
2. 检查是否有更具体的选择器（比如 div.card input）覆盖了你的规则
3. 确认伪元素（::before、::after）也被重置了——它们默认仍是 content-box，悄悄撑开布局却不显眼

真正麻烦的不是写错代码，而是以为写对了，结果盒子还在悄悄膨胀。