浮动父容器高度塌陷是必现问题，因CSS 2.1规定浮动元素脱离文档流，父容器不计算其尺寸致高度为0，引发溢出、背景消失等问题，需逐层用clearfix或改用Flex/Grid。
为什么浮动父容器高度塌陷是必现问题
只要子元素用了 float，父容器默认就不计算这些子元素的尺寸——这不是bug，是CSS 2.1规范里明确定义的行为。浏览器压根不把浮动元素当“参与文档流的块”，所以父级高度直接算成0。你看到的“内容溢出”“背景消失”“后续元素上移”，全是因为这个塌陷。
- 哪怕只有一层浮动，父容器没清除，就塌陷
- 嵌套多层时，每一级浮动父容器都得单独处理，不能靠外层“一劳永逸”
-
overflow: hidden等触发BFC的方式能临时止血，但不是语义化清除，可能截断阴影、下拉菜单等溢出内容
clearfix 必须逐层加在每个浮动父容器上
没有“继承式清除”这回事。父容器的 clearfix 只管自己内部的浮动子元素，对孙子级、曾孙级完全无效。你必须在每层有浮动子元素的容器上显式应用。
- 错误写法：
.outer { @extend .clearfix; }但.inner没加，照样塌陷 - 正确做法：只要某元素内有
float: left或float: right的直系子元素，它自己就得带clearfix - 推荐用现代标准写法（兼容IE8+）：
.clearfix::after { content: ""; display: table; clear: both; }
Flex/Grid 替代方案在哪些场景下反而更脆弱
别以为换成 display: flex 就一劳永逸。它确实消灭了浮动和清除需求，但会引入新约束：
- 父容器设了
flex，子元素的float直接失效（规范规定：flex item 上float无效果） - 如果子元素本身依赖浮动实现文字环绕（比如图片+段落），
flex会彻底破坏排版逻辑 - 老项目混用浮动和flex时，容易漏掉某一层仍用浮动的模块，结果该层又塌陷——比纯浮动更难排查
检查是否漏掉 clearfix 的三个快速定位点
嵌套深时，肉眼很难盯住每一层。优先查这三个位置：
立即学习“前端免费学习笔记（深入）”；
- 所有含
class="col-*"或class="sidebar"这类布局类名的容器（它们大概率有浮动子元素） - 所有使用了
float: left/float: right的元素的**直接父元素**（不是祖先） - 控制台里选中疑似塌陷的容器，看 computed 样式中
height是否为0px，再往上逐级验证
Vue 组件模板里，外层 <div> 被自动包裹，但开发者没意识到它成了浮动子元素的新父级，也没加 <code>clearfix。
