box-sizing: border-box 能修复浮动栏宽度超限问题，因其将 padding 和 border 纳入 width 计算，避免 content-box 下实际宽度超 100%；但需全局设置、处理父容器 padding、bfc、margin 及替换元素 min-width 等配套措施。
box-sizing: border-box 为什么能 fix 浮动栏宽度超限
浮动栏换行或右侧被挤掉，90% 是因为 box-sizing: content-box 让 width: 50% + padding: 8px + border: 1px 实际占宽超过 50.03%，缩放后浏览器四舍五入成 51%，直接崩掉。改用 box-sizing: border-box 后，padding 和 border 被“吃”进 width 里算，width: 50% 就真等于左 border 到右 border 的总宽。
只给浮动子元素加 box-sizing 不够，必须全局或父子同设
常见错误是只在 .item 上写 box-sizing: border-box，但父容器有 padding: 10px 且仍是 content-box，那子元素按 width: 100% 算出来的宽度，就比父容器可用宽度还大——照样溢出。
-
*或*::before, *::after全局重置最省事，IE8+ 都支持 - 若用了 Element Plus、Ant Design 等组件库，先查它是否把
box-sizing改回content-box，得用更具体选择器覆盖 - 不要只写
html, body { box-sizing: border-box }—— 它不继承，子元素还是默认值
box-sizing 解决了计算逻辑，但没管 margin 和 BFC
box-sizing: border-box 只控制 width/height 与 padding/border 的关系，对 margin 无效。浮动栏仍可能因 margin 叠加或父容器高度塌陷而错位。
- 所有浮动子项的
width加margin-left/margin-right总和不能超 100% - 父容器必须形成 BFC（比如加
display: flow-root或用伪元素清除浮动），否则浮动子项高度不参与父容器高度计算，百分比宽度会按 0 基准算 - 避免在浮动元素上混用
width和flex-basis，浮动下后者被忽略，但容易误判为生效
input、textarea 等替换元素要额外加 min-width: 0
即使 box-sizing: border-box 生效，input 这类替换元素默认 min-width: auto，在 flex 容器中会抗拒收缩，导致撑破父容器。
- 显式加
min-width: 0是必须动作，不是可选项 - 配合
flex: 1时，建议写成flex: 1 1 0，明确flex-basis为 0 - 检查 computed styles，确认目标元素的
box-sizing确实是border-box，别被 UI 库样式覆盖掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
