::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;
}

说明：

立即学习“前端免费学习笔记（深入）”；

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 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 作为通用工具类复用

不复杂但容易忽略——核心就三行关键样式，加对位置，浮动塌陷问题自然解决。