应清除浮动而非误用box-sizing：父容器高度塌陷需用overflow:hidden、display:flow-root或::after伪元素解决；box-sizing只影响自身宽高计算逻辑，对浮动塌陷无效。
浮动元素导致父容器高度塌陷怎么办
这是最常触发 box-sizing 误用的场景：父元素没设高度，子元素全浮动后，父元素高度变成 0。这不是 box-sizing 能解决的问题，它管的是盒模型尺寸计算方式，不是清除浮动。
- 真正该做的是清除浮动 —— 用
overflow: hidden、display: flow-root（推荐）、或伪元素::after清除 -
box-sizing: border-box在这里加了也没用，父容器连内容高度都没了，border/padding 再怎么算也还是 0 - 如果强行给父元素设
height或min-height，反而会让布局僵硬，响应式失效
box-sizing 改变的是哪些尺寸的计算逻辑
box-sizing 只影响元素自身宽高的解释方式，不涉及浮动、定位或层叠上下文。默认 content-box 下，width: 200px 指纯内容区宽；设成 border-box 后，这 200px 就包含 padding 和 border。
- 必须配合具体数值型
width/height才有表现，width: auto时无效果 - 常见误用：给浮动子元素加
box-sizing: border-box，以为能“撑开”父容器 —— 实际只是让它的 padding/border 被算进 width，和父容器是否塌陷无关 - 全局重置常用
* { box-sizing: border-box; }，但要注意表单控件（如<input>）在某些浏览器中可能因此错位，需单独重置
flex/grid 布局下 box-sizing 还重要吗
依然重要，但作用场景变了。flex item 和 grid item 默认会按 content-box 解释 width，如果你写了 padding 又没设 box-sizing: border-box，实际占用空间会超出预期。
- 例如 flex 容器里两个
width: 50%的子项，若都有padding: 10px且未设border-box，它们会溢出容器 - grid 中类似：
grid-template-columns: 1fr 1fr的列，若子项有 padding 且是content-box，内容区会被压缩，视觉上不对称 - 现代项目建议统一用
border-box，避免反复在 padding 处理上踩坑
IE8 及更早版本对 box-sizing 的兼容处理
IE8 支持 box-sizing，但需要 -ms-box-sizing 前缀；IE7 及以下完全不支持，且无法优雅降级。
立即学习“前端免费学习笔记（深入）”；
- 如果必须兼容 IE7，不能依赖
box-sizing控制尺寸，得手动把 padding/border 从 width 中减掉（比如写width: 180px配padding: 10px） - autoprefixer 默认不为
box-sizing加前缀，需显式配置supports: true并检查目标浏览器范围 - 注意：某些 CSS 重置库（如 normalize.css）已移除对
-ms-box-sizing的声明，老项目升级时容易漏掉
实际改浮动布局，先想清楚要解决的是「高度塌陷」还是「尺寸计算不准」——前者靠清除浮动，后者才轮到 box-sizing 出场。混着用，问题只会更难定位。
