双伪元素清除浮动可解决父子margin重叠问题，其核心是::before创建BFC边界阻断外边距合并，::after清除浮动；需严格满足display:table、content:""、*zoom:1等条件。
双伪元素清除浮动能解决父子margin重叠问题
单伪元素（::after）只在父容器末尾插入一个块级空节点并 clear: both，它确实能撑开父高、闭合浮动，但对父元素自身的 margin-top 或 margin-bottom 无保护作用。当父元素没有上边框、上内边距，且第一个子元素设置了 margin-top，就会发生「外边距合并」——父元素顶部 margin 消失，布局上移。
双伪元素法额外用 ::before 创建一个不可见的起始占位，强制父元素生成 BFC 边界，阻断与第一个子元素的 margin 合并。这是它比单伪元素更健壮的核心原因。
双伪元素的写法和关键参数不能省略
标准双伪元素清除类通常长这样：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 触发 hasLayout */
}注意几个硬性要求：
立即学习“前端免费学习笔记（深入）”；
-
display: table是关键：比block更稳妥，能兼容老版 WebKit 和 IE，避免某些场景下伪元素不参与 BFC 建立 -
::before必须存在且非空（哪怕content: ""），否则无法阻止 margin 合并 -
*zoom: 1不是可选补丁——IE6/7 下，仅靠伪元素无法触发 layout，必须加这个 hack 才生效 - 不能把两个伪元素合并成一个规则写（如
.clearfix::before, .clearfix::after { clear: both; }），因为::before不需要clear
什么时候其实不需要双伪元素？
如果你的父容器本身有 border、padding、overflow: hidden 或已触发 BFC（比如 display: flow-root），那它的 margin 就不会和子元素合并，此时单伪元素或 even overflow: hidden 都够用。
换句话说，双伪元素的价值集中在「纯内容容器 + 需要精确控制首尾间距」的场景，比如卡片组件、文章摘要列表、表单分组等语义清晰但样式极简的模块。
现代项目中，如果不用兼容 IE，直接用 display: flow-root 是最干净的替代方案——它天然隔离 margin、自动包含浮动，还不需要伪元素。
容易被忽略的兼容性细节
双伪元素写法在 iOS Safari 5.1–6.1 和 Android Browser 2.1–4.3 中，若 content 为空字符串且未设 display，可能渲染异常或失效。所以务必保留 display: table（不是 block）和显式的 content: ""。
另外，Vue / React 组件中动态切换类名时，如果用 class="clearfix" + 条件绑定，需确保该 class 在首次渲染时就存在——伪元素是渲染时生成的，后期加 class 不会自动补出 ::before。
真正麻烦的从来不是怎么写，而是忘记它只在「父无BFC、又需保margin、还要兼容老浏览器」这三者同时成立时才不可替代。
