clearfix是通过伪元素清除浮动的方法，使用::after在父容器末尾插入块级元素并设置clear: both，确保父容器正确包裹浮动子元素，避免高度塌陷，无需额外标签且兼容性好。
当使用浮动（float）创建多列布局时，父容器往往无法正确包裹浮动的子元素，导致布局错乱。这时可以用 clearfix 技巧来清除浮动影响，确保父容器包含所有浮动子元素。
什么是clearfix？
clearfix 是一种通过伪元素在CSS中清除浮动的方法，它不会影响HTML结构，也不需要额外的标签。
推荐使用的现代 clearfix 写法：
在父容器上应用以下CSS类即可自动清除内部浮动：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
}如何在多列布局中使用？
假设你有两列或三列都使用了 float，父容器需要包含它们的高度：
<div class="row clearfix"> <div class="col">左侧内容</div> <div class="col">右侧内容</div> </div>
.col {
float: left;
width: 50%;
}
/* 应用clearfix解决高度塌陷 */
.row.clearfix::after {
content: "";
display: block;
clear: both;
}为什么使用 ::after 伪元素？
使用 ::after 可以在不修改HTML的前提下，在父容器末尾插入一个不可见的块级元素，并设置 clear: both 来闭合浮动。这样父容器就能正确计算高度。
这个方法兼容性好，适用于所有现代浏览器以及IE8及以上版本。
注意事项
- 确保伪元素的 content 不为空（即使只是空字符串）
- display 设置为 block 或 table 才能生效
- 避免给需要清除浮动的容器设置 overflow: hidden 来替代 clearfix，这可能意外裁剪内容
基本上就这些，clearfix 是处理浮动布局的经典解决方案，简单有效。
