box-sizing: border-box能解决两列width: 50%因padding/border超100%导致换行或溢出的问题，因其将padding和border纳入width计算，但需全局重置、::before、*::after并处理img/iframe/min-width等配套问题。
因为默认 box-sizing: content-box，两列各写 width: 50% 时，只要任意一列有 padding 或 border，实际占用宽度就 > 50%，加起来必然超 100%。
box-sizing: content-box 是罪魁祸首
浏览器默认按 content-box 解析尺寸：元素总宽 = width + 左右 padding + 左右 border。哪怕你写 width: 50%，只要它带 padding: 8px 和 border: 1px，真实宽度就是 50% + 16px + 2px。两列相加，轻松突破 100%，直接换行或横向溢出。
这不是写错了，是盒模型语义本身就不匹配“视觉上并排”的直觉。
- 常见表现：左侧栏文字被切、右侧栏掉到下一行、Flex 容器里按钮被挤出去
- DevTools 的「Computed」面板里看
box-sizing值，别只信 CSS 文件里写了就生效——框架或重置样式可能覆盖它 -
input、textarea等表单元素自带padding，不显式重置的话，width: 50%几乎必撑破
全局重置 box-sizing 才真正起效
只给容器或某几个类加 box-sizing: border-box 没用。子元素、伪元素（比如 ::before）仍走默认的 content-box，照样外扩。
必须用通配重置：
*, *::before, *::after {
box-sizing: border-box;
}
注意：html, body { box-sizing: border-box } 不行——box-sizing 不继承；*:not(img) 这类排除写法也不推荐，容易漏掉 svg、iframe 的 wrapper。
border-box 不能解决所有溢出
box-sizing: border-box 只管尺寸计算逻辑，不管内容本身会不会撑开布局。以下情况即使开了它，仍需额外处理：
-
img、svg、iframe：必须加max-width: 100%+height: auto（iframe还要补width: 100%） - Flex 子项里的表单控件（
input、button）：默认min-width: auto会阻止收缩，得显式写min-width: 0 - 表格：
table无视max-width和box-sizing，得配table-layout: fixed+width: 100% - 连续无空格文本（如长 URL）：
white-space: nowrap下必须加overflow: hidden+text-overflow: ellipsis
Flex/Grid 中 width: 100% 反而坏事
在 display: flex 或 display: grid 容器里，子项写 width: 100% 会锁死弹性行为，导致无法响应父容器缩放。优先用：
- Flex 子项：用
flex: 1或flex: 0 1 auto替代width: 100% - Grid 子项：用
grid-column: 1 / -1或justify-self: stretch，而非width: 100% - Grid 轨道定义里慎用
1fr：若子项含不可缩内容，改用minmax(0, 1fr)并加min-width: 0
最常被忽略的是：不是所有“溢出”都该靠 box-sizing 解决；得先确认是盒模型膨胀，还是布局逻辑、文本流或渲染层的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
