高度塌陷源于浮动元素脱离文档流导致父容器无法计算其高度，box-sizing仅改变宽高含义而不影响浮动行为，有效解决方案是触发BFC（如display: flow-root）或伪元素清除。
高度塌陷本质是盒模型 + 浮动共同作用的结果
是的，高度塌陷直接源于标准盒模型下浮动元素脱离文档流的机制。父容器按标准盒模型计算高度时，只依据「仍在文档流中的内容」撑开；而 float: left 或 float: right 的子元素已脱离文档流，不参与父容器高度计算——结果就是父容器 height: auto 时高度坍为 0。
box-sizing 不解决高度塌陷，但影响你对塌陷的感知
box-sizing: border-box 只改变 width/height 的含义（是否包含 padding 和 border），它不影响元素是否在文档流中，也不影响浮动导致的脱离行为。所以即使你写了 * { box-sizing: border-box; }，只要子元素还浮动，父容器照样塌陷。
- 常见错觉：加了
border-box后布局“看起来”好了，其实是 padding/border 没把内容挤出可视区，掩盖了塌陷，但父容器真实高度仍是 0 - 验证方法：给父容器加
background: red;和outline: 2px dashed blue;，一眼就能看出它是否真的包裹了子元素
真正有效的清除方案，必须重建「包含关系」
核心不是“清除浮动”，而是让父容器重新“看见”子元素的高度。这靠的是触发 BFC（块级格式化上下文）或插入清除节点，而非单纯重置 margin/padding。
-
display: flow-root：现代首选，无副作用，兼容 Chrome 64+/Firefox 58+/Safari 15.4+，一行解决 -
overflow: hidden：老项目常用，但可能意外裁剪position: absolute子元素或阴影 -
::after伪元素清除：.clearfix::after { content: ""; display: table; clear: both; }兼容 IE8+，但需手动加 class，不如flow-root干净
别用 flex/grid 布局去“修”浮动塌陷
如果你已经在用 display: flex 或 display: grid，那根本不会出现高度塌陷——因为它们天然不依赖 float，子项默认就在文档流内参与尺寸计算。强行在 flex 容器里给子项加 float，反而会破坏布局逻辑，还可能触发未定义行为。
立即学习“前端免费学习笔记（深入）”；
真正该做的，是把遗留的 float 布局逐步迁移到 flex/grid；若必须兼容老浏览器，就用 flow-root 或 clearfix，而不是一边 flex 一边 float —— 这种混合写法，问题比塌陷本身更难排查。
