必须用::before和::after两个伪元素：::before通过content: ""和display: table触发BFC/hasLayout使父容器“意识到该撑开”，::after通过clear: both真正清除浮动；缺一不可，且不可混用或替换为单伪元素。
::before 和 ::after 必须分用，不能混用同一伪元素干两件事——这是双重清除浮动能生效的前提。
为什么必须用两个伪元素，而不是只用 ::after
单靠 ::after 清除浮动在多数现代浏览器中可行，但存在兼容断层：IE6/IE7 不支持 ::after（仅支持单冒号 :after），且部分旧版 Safari/Android Webview 对 display: table 的解析不稳定。引入 ::before 的目的不是“多加一层保险”，而是触发 hasLayout（IE）或 BFC（其他浏览器）的早期兼容机制——::before 本身不参与清除，只负责让父容器“意识到自己该撑开”。
-
::before设置content: ""+display: table，强制父容器生成匿名表格单元格，提前建立块级格式化上下文（BFC） -
::after才真正承载clear: both，它插入的位置在所有浮动子元素之后，物理上阻断浮动流 - 漏掉
::before，某些 IE 下父容器高度仍为 0；只留::before而没::after，则清除逻辑根本不存在
.clearfix::before 和 .clearfix::after 的最小可靠写法
网上常见错误是把 display: block 当成万能解、或漏掉 content 值——这两项一错，整个清除就失效。2026 年实测有效的组合只有以下这一组：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
-
content: ""缺一不可：没有content，伪元素不渲染，display和clear全部被忽略 - 必须用
display: table，不是block或flex：table触发 BFC 最稳定，且兼容所有支持伪元素的浏览器；block在 IE6/7 中无法闭合浮动 -
clear: both只能加在::after上：::before加了也无效，因为它的位置在内容最前，清不到后面的浮动
什么时候会失效？三个典型踩坑点
即使代码抄对了，也可能因上下文干扰而失效。重点排查以下三点：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
height或max-height：显式高度会压制 BFC 自动撑高行为，清除后父容器仍不显示高度 - 浮动子元素用了
position: absolute或transform：这些属性会让元素脱离文档流，不再被clear捕获，伪元素清除完全无效 - 类名没正确应用到**直接包裹浮动子元素的父容器**上：比如浮动的是
.item，但你给或外层<section></section>加了.clearfix，那清除作用域就错了
如果同时要加前缀图标，::before 还能用吗？
不能。一旦你把图标塞进 ::before（比如 content: "★"），它就再也不能承担 display: table 的兼容职责——content 值唯一，"★" 和 "" 冲突。此时必须换方案：
- 图标改用
::after，清除逻辑挪到额外空标签或 JS 插入的<div class="clear"></div> - 或放弃双伪元素，改用
overflow: hidden（注意溢出截断风险） - 更推荐：用现代布局替代浮动——
display: flex或display: grid天然不需要清除浮动
伪元素清除浮动本质是过渡方案，它的脆弱性正体现在：图标和清除必须二选一，且任何样式微调都可能打破平衡。
