CSS多层浮动如何稳定布局？

CSS浮动导致的父容器高度塌陷是遵循规范而非缺陷，每一层浮动父容器都必须独立应用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 组件模板里，外层