::after伪元素通过生成块级匿名盒子并设置clear:both可替代空div清除浮动，其本质是让父容器重新包含脱离文档流的子元素，需配合content:""、display:block（或table）及height:0等声明。

直接用 ::after 伪元素加 clear: both 就行，比加空 <div> 标签干净得多，且不破坏语义结构。<h3>为什么 <code>::after 能替代空标签

浮动导致父容器高度塌陷，本质是子元素脱离文档流后，父容器“感知不到”它们的存在。空标签起作用，是因为它被设为块级、不浮动、并强制清除了左右浮动——::after 同样能生成一个满足这三点的匿名盒子。

• ::after 生成的内容默认是行内，必须显式设 display: block 才能占满整行、触发清除行为
• content: "" 是必需的，哪怕为空字符串；IE6–7 甚至要求内容不能完全为空（如用 content: "." 更稳妥）
• height: 0; visibility: hidden; 是为了不让伪元素撑开额外高度或影响视觉布局
• clear: both 必须写在 ::after 规则里，写在父选择器上无效

.clearfix 类的标准写法与兼容性处理

现代项目可直接用双冒号语法，但若需支持 IE8 及更早版本，得补 *zoom: 1 触发 hasLayout（IE 专有机制）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
/* IE6–7 兼容 */
.clearfix {
  *zoom: 1;
}

• display: table 比 display: block 更稳妥：它既避免了某些浏览器中 height: 0 失效的问题，又天然具备 BFC 特性
• 不要只写 ::after，::before 一并声明是为了防止顶部外边距合并（margin collapse）
• *zoom: 1 是 IE hack，现代项目可省略；但若还在维护老系统，别漏掉

常见误用：伪元素没生效的几个原因

写了 ::after 却发现浮动还是没清掉，大概率是这几个地方出错了。

• 忘了给父元素加 .clearfix 类，只写了样式没挂载到元素上
• content 值为空字符串但没加引号，写成 content: ; → 浏览器忽略整个声明
• 父元素本身设置了 overflow: hidden 或 float，和伪元素清除逻辑冲突
• 用了单冒号 :after 却在严格模式 HTML5 文档中，部分旧版 Safari/IE 可能不识别（推荐统一用 ::after）

要不要彻底放弃 float 布局

伪元素清除只是“修浮”，不是“治本”。如果项目允许，display: flex 或 display: grid 能从根本上绕过浮动塌陷问题。

• flex 布局下，子项默认不脱离文档流，父容器自动撑高，无需任何清除手段
• 但若要兼容 IE10 及以下，float + ::after 仍是可靠组合
• 真正容易被忽略的是：清除浮动只是表象，背后常暴露的是布局模型选择不合理——先想清楚是否真需要浮动