现代项目应使用display: flow-root修复浮动导致的父容器高度塌陷，因其专为触发bfc设计、语义清晰且无副作用；旧浏览器兼容场景才用clearfix伪元素清除法。
直接说结论：现代项目用 display: flow-root，兼容旧浏览器才用 .clearfix::after；所谓“完美”，其实是选对场景，不是堆参数。
为什么父容器高度会塌陷？
浮动元素（float: left 或 float: right）会脱离常规文档流——它还在页面上，但父容器计算高度时直接“看不见”它。结果就是父容器 height 变成 0，背景、边框、下边距全失效，后续兄弟元素上移盖住内容。
这不是 bug，是 float 的原始设计目的（图文环绕），但它在布局中几乎总是要被修复。
关键点：
- 塌陷只影响父容器自身高度和包含逻辑，不影响浮动子项的位置
-
clear: both写在父元素上无效——因为 clear 只对同级浮动兄弟生效，不是祖先/后代关系 - 真正起作用的，必须是“在浮动元素之后、父容器内部”的一个块级节点
.clearfix::after 是怎么工作的？
它通过伪元素在父容器末尾插入一个“隐形但参与盒模型”的节点，强制拉低父容器底边。
标准写法（IE8+ 兼容）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
为什么是 display: table 而不是 block？
-
display: table自动触发 BFC，确保父容器重新包含浮动子项 - 避免某些上下文（如 inline-level 父容器）下
display: block带来的基线对齐间隙 -
content: ""必须存在，否则伪元素不渲染，整个机制失效
别再加 zoom: 1 或 *+height: 1% ——2026 年主流项目已放弃 IE6–8 支持，这些只是维护噪音。
现代替代方案比 clearfix 更干净
如果不需要支持 IE，以下方式语义更清晰、副作用更少：
-
display: flow-root：专为此场景设计，创建新 BFC，不改变子元素布局逻辑，无裁剪风险 -
display: flex或display: grid：父容器变成弹性/网格容器后自动包含浮动子项，但注意这会覆盖子项原有float行为，可能需同步调整子项样式 -
overflow: hidden或auto：能触发 BFC，但可能意外裁剪阴影、下拉菜单、滚动条等溢出内容，慎用
不要为了“清除浮动”而强行保留 float 布局——flex 和 grid 已是默认选择，float 仅建议用于文字环绕等少数场景。
容易被忽略的实战细节
clearfix 不是万能胶：
- 它只解决父容器高度塌陷，不阻止非浮动兄弟元素围绕浮动子项排列（即“文字环绕”效果依然存在）
- 多个浮动元素之间若需换行，
::after只在最后生效，中间仍需手动加clear: both - 别把
.clearfix当全局重置类混进基础样式里——它只该加在明确有浮动子项的**直接父容器**上 - 最常出问题的地方，往往是你随手加了
float: left却忘了检查父容器是否塌陷的那个<div> <p>真正要盯住的，从来不是 clearfix 写得够不够全，而是那个本不该浮动却浮了、本该用 flex 却硬套 float 的元素。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
