高度塌陷不是 bug，是 float 的设计行为；修复核心是让父容器重新包含浮动子元素，手段只有两类——触发 bfc 或插入清除锚点，clearfix 是兼容性最好的伪元素方案，但现代项目应优先用 display: flow-root。
直接说结论：高度塌陷不是 bug，是 float 的设计行为；修复核心是让父容器重新包含浮动子元素，手段只有两类——触发 BFC 或插入清除锚点，clearfix 是兼容性最好的伪元素方案，但现代项目应优先用 display: flow-root。
为什么 clear: both 加在父容器上完全没用
很多人写 .parent { clear: both; }，结果父容器照旧塌陷。这是因为 clear 作用对象是「自身所处的流位置」，它只让当前元素避开前面的浮动兄弟元素，对内部浮动子项毫无影响。父容器加 clear，等于让它自己“躲开不存在的前一个浮动兄弟”，逻辑上就错位了。
-
clear: both必须作用在浮动元素之后的「同级块级元素」上（比如紧跟在floatdiv后面的p） - 伪元素方案有效，是因为
::after被插入到父容器末尾，成为浮动子项的「下一个兄弟」，此时clear: both才真正起效 - 如果父容器本身是
inline元素（如span），得先设display: inline-block或block，否则伪元素不渲染
如何正确使用 clearfix 伪元素
现代标准写法必须同时满足三个条件，缺一不可：
-
content: ""：伪元素无内容则不生成，哪怕只写空字符串也必须存在 -
display: table（推荐）或display: block：table更稳妥，避免 IE8 下边距合并异常；block在某些场景下可能撑不开高度 -
clear: both：这是清除行为的关键，仅靠前两项不能解决问题
完整代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
若需兼容 IE6/7，补一句 *zoom: 1 触发 hasLayout，但注意：*zoom: 1 不能写成 zoom: 1 或 zoom: "1"，否则失效。
display: flow-root 为什么是更优解
它是 CSS 新增的专用值，目的就是解决高度塌陷问题，语义清晰、副作用为零。和 overflow: hidden 都能创建 BFC，但关键区别在于：
-
display: flow-root不改变溢出行为——下拉菜单、tooltip、transform 动画全都不受影响 -
overflow: hidden会裁剪任何超出父容器的内容，上线前稍不注意就会埋雷 - 支持情况：Chrome 64+、Firefox 62+、Safari 15.4+；如需支持 Safari 15.3 或更低，暂不可用
一行生效，无需伪元素、无 hack、不污染结构：
.container {
display: flow-root;
}
Flex/Grid 布局下还用 clearfix 吗
完全不用。只要父容器设了 display: flex 或 display: grid，它自动成为 BFC，且浮动子元素在其中退化为普通块级元素——float 属性基本失效（仅剩文字环绕效果），高度自然被包含。
- 混用
float和flex是反模式，可能导致老浏览器渲染异常 - 某些旧版框架（如 Bootstrap 3 栅格）内部仍用 float，若外层套了 flex，要确认是否已关闭其浮动类（比如移除
col-xs-6上的 float） - 别为了“保险”在 flex 容器里硬加
.clearfix，它不会报错，但也不会起任何作用
真正容易被忽略的是：很多项目还在用 overflow: hidden 临时救急，却没检查是否有真实溢出需求；而 display: flow-root 看似简单，上线前必须核对目标浏览器版本——Safari 15.3 及更早不支持，这点常被漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
