float布局塌陷指父容器因子元素浮动而高度坍缩为0，导致背景/边框消失、后续元素上移；clearfix通过伪元素+clear:both强制撑高父容器，但现代推荐用flex或grid替代。
什么是 float 布局导致的塌陷
当父容器内所有子元素都设置了 float: left 或 float: right，父容器会“看不见”这些浮动元素的高度，表现为高度坍缩为 0 —— 这就是常说的“塌陷”。常见现象是父容器背景色不显示、边框消失、后续元素上移覆盖。
为什么 clearfix 能解决塌陷
clearfix 利用伪元素（::before 和 ::after）在父容器内部插入一个清除浮动的节点，强制父容器重新计算高度。核心在于 clear: both 阻止该节点被浮动元素影响，从而撑开父容器。
现代写法推荐使用以下最小化版本（兼容 IE8+）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 display: block 更稳妥，能避免某些 IE 下的 margin 双倍问题。
立即学习“前端免费学习笔记（深入）”；
直接加 class="clearfix" 就够了吗
不是所有场景都能靠加 class 解决。需检查以下几点：
- 父容器不能有
overflow: hidden或overflow: auto等隐藏溢出的设置，否则可能掩盖浮动但不真正撑高（尤其在需要绝对定位子元素时） - 如果父容器本身是
inline元素（如<span>），clearfix无效 —— 必须先设display: block或inline-block - Flex 或 Grid 布局下不需要 clearfix，
float已基本退出主流布局逻辑，强行混用反而引发意外定位
还有没有更现代的替代方案
有，而且更推荐：
- 用
display: flex替代 float 布局：父容器设display: flex，子项自动排列且父容器自然撑高 - 用
display: grid：适合二维布局，同样无塌陷风险 - 若必须保留 float（比如老项目维护），可用
overflow: auto作为快速 hack，但要注意它可能触发滚动条或裁剪绝对定位子元素
clearfix 是过渡方案，本质是在对抗 float 的副作用；而 Flex/Grid 是从设计上绕开了这个问题。真正容易被忽略的是：很多所谓“塌陷”，其实是没意识到 float 已不该用于整体布局了。
