浮动塌陷指父容器因子元素浮动而高度坍缩，clearfix通过::after伪元素清除浮动以恢复高度，兼容写法可加zoom:1，现代布局推荐使用Flex或Grid替代。
当使用 float 属性进行布局时，父元素常常无法正确包裹浮动的子元素，导致布局错乱。这就是所谓的“浮动塌陷”问题。为解决这个问题，CSS 提供了多种清除浮动的方法，其中 clearfix 是最常用且兼容性良好的技巧之一。
什么是浮动塌陷？
当一个容器内的子元素全部设置为 float: left 或 float: right 时，父容器会失去高度感知，表现为高度坍缩成0。这会影响后续元素的排版，造成布局断裂。
使用 clearfix 清除浮动
clearfix 是一种通过伪元素在容器末尾插入隐藏内容并清除浮动的技术，能有效修复父容器高度丢失的问题。
现代标准 clearfix 写法：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
}
将这个类应用到包含浮动子元素的父容器上即可：
<div class="clearfix"> <div style="float: left;">左侧栏</div> <div style="float: right;">右侧栏</div> </div>
为什么用 ::after 而不是 :after？
::after 是 CSS3 中推荐的伪元素写法，而 :after 是旧语法。虽然大多数浏览器仍支持单冒号，但建议使用双冒号以区分伪类和伪元素，提高代码规范性。
兼容老版本IE的处理方案
若需支持 IE6/7 等老旧浏览器，可添加 zoom: 1 触发 hasLayout 机制：
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 */
}
更简洁的替代方案：overflow 方法
对于简单场景，可以直接给父容器设置 overflow: hidden 来闭合浮动：
.container {
overflow: hidden; /* 自动包含浮动子元素 */
}
这种方法简单直接，但要注意可能裁剪掉超出容器的内容，如定位元素或阴影。
现代布局已逐步替代浮动
随着 Flexbox 和 Grid 布局的普及，浮动已不再是主流布局手段。推荐在新项目中优先使用：
- Flex 布局：适合一维排列（行或列）
- CSS Grid：适合二维网格布局
这些现代方法天然不产生浮动问题，无需额外清除，结构更清晰，维护更方便。
基本上就这些。掌握 clearfix 技巧有助于维护旧项目，但在新开发中应优先考虑更先进的布局方式。
