父元素高度塌陷是指浮动子元素脱离文档流导致父元素高度收缩为0；clearfix通过::before和::after伪元素插入content:""并设置clear:both，使父容器重新包含浮动子元素高度。
父元素高度塌陷到底是什么现象
当子元素设置了 float: left 或 float: right，而父元素没有设置固定高度或清除浮动时，父元素会“看不见”浮动子元素，表现为高度收缩到 0 或仅包裹非浮动内容——浏览器渲染时认为浮动元素已脱离文档流，不再参与父容器高度计算。
典型表现：border 或 background-color 看不到，下方兄弟元素向上顶替、遮盖父容器内容。
为什么 clearfix 类能解决问题
clearfix 的核心是利用伪元素（::before 和 ::after）在父容器内部插入一个“视觉上不可见但具有清除行为”的块级元素，强制让父容器重新包含浮动子元素的高度。
关键点在于：clear: both 必须作用在父容器的最后一个“行框”上，而 ::after 伪元素正好满足这个位置要求；同时 content: "" 是触发伪元素显示的必要条件，缺了它整个机制就失效。
常见错误写法：
– 忘记 content: ""（伪元素不渲染，清除无效）
– 只写了 ::before 没写 ::after（旧版 IE 需要 ::before 触发 hasLayout，现代浏览器主要靠 ::after）
– 把 clear 写在子元素上（治标不治本，且破坏结构语义）
推荐的 clearfix 写法及兼容性说明
以下是最小可用、兼顾 IE8+ 和现代浏览器的版本：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
说明：
– display: table 比 display: block 更安全：避免某些场景下外边距合并问题，且能正确触发 BFC（块级格式化上下文）
– 不用 display: flex 或 display: grid 替代：它们虽能撑开高度，但会改变子元素布局行为，属于“换方案”而非“清浮动”
– IE6/7 需额外加 *zoom: 1（触发 hasLayout），但当前基本可忽略
什么情况下不该用 clearfix
不是所有浮动都需要清除。盲目加 clearfix 可能掩盖更合理的布局重构机会：
- 子元素只是局部图标或装饰性浮动，父容器本就不该被它撑高 → 改用
position: absolute或inline-block - 整行多列布局 → 直接用
display: flex或display: grid，浮动已是过时方案 - 父元素已有
overflow: hidden或overflow: auto→ 它们本身就能创建 BFC，等效于清除浮动（但要注意溢出裁剪副作用）
真正需要 clearfix 的，往往是遗留代码中无法改动浮动逻辑、又必须让父容器正确包裹的场景。
记住：清除浮动不是目的，让父容器获得预期高度才是。有时候删掉 float 比加 clearfix 更干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
