::after伪元素清除浮动是主流方法，通过在父容器末尾插入虚拟清除块（content:"";display:table;clear:both），避免HTML污染且兼容性好，需作用于浮动元素的直接父容器。
使用 ::after 伪元素配合 clear: both 是目前最主流、兼容性好且不污染 HTML 结构的清除浮动方法。
为什么用 ::after 清除浮动？
浮动元素会脱离文档流，导致父容器高度塌陷。传统上用空标签（如 <div style="clear:both"></div>）强行撑开父容器，但破坏了语义化。而 ::after 在父元素末尾“虚拟”插入一个清除块，无需额外 HTML 标签。
标准清除浮动写法（推荐）
给浮动元素的**直接父容器**添加如下 CSS：
.clearfix::after {
content: "";
display: table;
clear: both;
}说明：
立即学习“前端免费学习笔记（深入）”；
-
content: ""：必需，否则伪元素不渲染；值不能为空字符串以外的值（如none无效） -
display: table：触发 BFC，同时保证清除块能正确撑高父容器（比block更稳妥，避免 IE6/7 下边距合并等问题） -
clear: both：清除左右两侧浮动，使该伪元素位于所有浮动元素下方
兼容旧版 IE 的写法（可选）
若需支持 IE6–IE7，需额外添加 zoom: 1 触发 hasLayout：
.clearfix {
*zoom: 1; /* IE6–7 only */
}
.clearfix::after {
content: "";
display: table;
clear: both;
}其中 *zoom: 1 是 IE 专有 hack（* 只被 IE6–7 识别），现代项目中通常可省略。
使用时的关键注意点
确保清除生效，需注意以下细节：
- 必须作用于**包含浮动子元素的父容器**上，不能加在浮动元素自身
- 父容器不能设置
overflow: hidden等意外触发 BFC 的属性（除非你明确需要截断内容） - 若父容器已有
::after伪元素用于其他目的，需合并逻辑，避免覆盖 - 现代开发中可直接将
.clearfix作为通用工具类复用
不复杂但容易忽略——核心就三行关键样式，加对位置，浮动塌陷问题自然解决。
