使用::after伪元素清除浮动可解决父容器高度塌陷问题。通过在浮动容器末尾插入伪元素并设置clear: both，使其包含浮动子元素。示例中clearfix类结合content: ""、display: block和clear: both实现清除；增强版加入::before和display: table兼容旧浏览器，确保BFC触发，避免布局异常。该方法无需额外标签，是现代前端标准实践。
在CSS中，使用::after伪元素清除浮动是一种常见且有效的做法。它的核心原理是通过在容器末尾插入一个伪元素，并为该伪元素设置清除浮动的样式，从而让父容器包含所有浮动的子元素。
为什么需要清除浮动
当一个容器内的子元素使用了float（如float: left或float: right），这些子元素会脱离正常的文档流，导致父容器无法正确感知它们的高度，从而出现高度塌陷。这时就需要清除浮动来恢复正常的布局。
使用 ::after 伪元素清除浮动
给需要包含浮动子元素的父容器添加一个::after伪元素，并设置其clear属性。
- 使用
content: ""确保伪元素存在 - 将伪元素设置为块级元素
- 使用
clear: both清除左右浮动
示例代码：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
}
然后将这个类应用到需要清除浮动的父元素上：
左浮动右浮动
增强版 clearfix 兼容性写法
为了兼容一些老式浏览器（如IE8），可以加入更多样式规则，确保伪元素生效。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
其中display: table配合content: ""可以在某些旧浏览器中触发块级格式化上下文（BFC），进一步防止布局问题。
基本上就这些。使用::after清除浮动既干净又无需额外HTML标签，是现代前端开发中的标准实践之一。
