使用::after伪元素清除浮动可解决父容器塌陷问题，通过生成隐藏的块级元素强制闭合浮动区域，保持结构语义化且兼容性好，推荐结合display:table优化写法。
在CSS布局中，当父元素没有设定高度，而子元素全部浮动时，父元素会发生“塌陷”，无法包裹住浮动的子元素。为了解决这个问题，需要清除浮动。其中一种广泛使用且推荐的方法是通过 ::after 伪元素 配合 clear: both 来实现。
使用 ::after 伪元素清除浮动
这种方法通过在浮动容器的末尾插入一个虚拟的“清除块”，强制元素闭合浮动区域，从而解决父容器高度塌陷的问题。
具体实现如下：
.clearfix::after {
content: ""; /* 生成一个空内容 */
display: block; /* 转换为块级元素，以便能应用 clear */
clear: both; /* 清除左右两侧的浮动 */
height: 0; /* 避免占用额外空间 */
visibility: hidden; /* 隐藏该元素 */
}
.clearfix { /* 可选：触发 BFC，增强兼容性 */
zoom: 1; /* 兼容 IE6/7 的 hasLayout 触发 */
}
将 clearfix 类添加到包含浮动子元素的父容器上即可：
立即学习“前端免费学习笔记（深入）”；
<div class="clearfix">
<div style="float: left;">左浮动</div>
<div style="float: right;">右浮动</div>
</div>
为什么用 ::after？
- 无需在HTML中添加额外标签，保持结构语义化
- content 生成的内容可被浏览器识别并参与布局
- clear: both 确保该元素位于所有浮动元素下方
- visibility: hidden 和 height: 0 保证不干扰页面视觉
现代写法优化（推荐）
为了兼容不同浏览器，并避免缩放问题，可以使用更健壮的版本：
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用 display: table 比 block 更安全，因为它不会触发某些旧版IE中的min-height问题，同时也能正常清除浮动。
其他清除浮动方法对比
- 给父元素设固定高度：不灵活，内容变化时容易出问题
- 添加空 div 并设置 clear: both：破坏HTML结构，不推荐
- overflow: hidden / auto：可能裁剪内容或产生滚动条
- flex 或 grid 布局：现代方案，无需清除浮动
基本上就这些。使用 ::after + clear: both 是兼容性好、语义清晰、无需修改结构的通用解决方案，尤其适用于仍在使用浮动布局的项目。在现代开发中，建议逐步过渡到 Flexbox 或 Grid 布局，从根本上避免浮动带来的问题。
