:after 能清除浮动而 :before 不行，是因为 :after 生成的内容位于元素末尾，配合 clear: both 可强制换行并撑开父容器；:before 插入开头，无法影响浮动闭合位置。
为什么 :after 能清除浮动，而 :before 不行？
因为清除浮动的本质是让父容器“感知”到浮动子元素的高度，:after 生成的内容默认位于元素末尾，配合 clear: both 可强制换行并撑开父容器；而 :before 插入在开头，无法影响后续浮动布局的闭合位置。实际中也有人误用 :before 加 clear，结果无效——不是语法错，是逻辑位置不对。
::after 清浮动的标准写法和必要声明
必须同时满足四个条件，缺一不可：
- 使用双冒号
::after（现代写法，兼容性更好；单冒号:after在旧版 IE 中有兼容问题） - 设置
content: ""（空字符串，但不能省略；否则伪元素不渲染） - 设为块级元素：
display: table或display: block（table更稳妥，避免 margin 合并干扰） - 执行清除：
clear: both
典型代码：
/* 推荐写法 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
为什么加 display: table 而不是 display: block？
两者都能触发清除，但 display: table 有隐式 vertical-align: baseline 和独立格式化上下文，不会和父容器的 margin 发生合并，避免意外的顶部/底部空白。而 display: block 在某些场景下（尤其父元素有 margin-bottom）可能引发外边距塌陷，导致高度计算偏差。另外，table 在 IE8+ 全面支持，无兼容风险。
哪些地方不能直接套用 .clearfix？
不是所有浮动容器都适合加 clearfix：
- Flex 或 Grid 容器内部的子元素浮动——此时浮动已失效，加了也没用
- 父元素本身设置了
overflow: hidden或auto——它本身就能形成 BFC，自动包含浮动，无需额外伪类 - 使用了
contain: layout的容器——现代 CSS 的布局隔离机制已接管高度包裹逻辑 - 服务端渲染或 SSR 场景中，若伪元素被 HTML 预渲染工具（如某些模板引擎）过滤掉
content声明，会导致清除失效
真正需要它的，是那些仍依赖 float 布局、且父容器未触发 BFC 的传统块级容器。
伪元素清除浮动看着简单，但 content 是否为空、display 类型选什么、父容器是否已有 BFC 触发条件——这三个点漏掉任何一个，都可能让页面在某个浏览器或某个嵌套层级里突然“塌陷”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
