::before防止父子margin合并需同时满足：content: ""、display: table、ie6/7下*zoom: 1，三者缺一不可；合并声明伪元素或改用其他display值均会失效。
::before 伪元素能防止父子元素间垂直外边距重叠，但必须满足几个硬性条件——缺一不可，否则它只是个“看不见的空内容”，对 margin 合并不起作用。
为什么 ::before 单独加 content: "" 不管用
很多人试过只写 .parent::before { content: ""; }，发现父元素顶部依然和子元素的 margin-top 合并了。这是因为：content: "" 创建的伪元素默认是 inline 级别，不参与 BFC 构建，也不阻断 margin 传递。它得“有存在感”才行——不是靠 visibility 或 height，而是靠 display 类型。
关键点在于：display: table（或 display: block + 触发 BFC 的其他方式）才是让伪元素真正“隔开”父子 margin 的核心。它让伪元素成为一个格式化上下文的起点，从而切断 margin 折叠链。
-
display: table是最稳妥的选择：兼容 IE8+、老版 WebKit，且不会意外触发其他布局副作用 -
display: block单独用不够——除非父元素同时满足 BFC 条件（如overflow: hidden），否则仍可能塌陷 -
content不能为空字符串以外的值（比如content: " "或content: "\00A0"）——某些旧引擎对空字符串处理不一致
::before 必须和 ::after 分开声明，不能合并选择器
如果你写成 .parent::before, .parent::after { content: ""; display: table; }，那 ::before 就失效了。因为 ::after 的 clear: both 只对自身生效，而 ::before 被“顺带”加上了 clear，这在语义和渲染上毫无意义，还可能干扰布局。
正确写法必须拆开：
.parent::before {
content: "";
display: table;
}
.parent::after {
content: "";
display: table;
clear: both;
}
注意：::after 这里其实不是为清除浮动，而是确保整个伪元素结构完整；真正起隔离作用的是 ::before 的 display: table。
IE6/7 下必须加 *zoom: 1
在 IE6/7 中，display: table 本身不足以触发 hasLayout，而 hasLayout 是让父元素“认出”伪元素并据此调整 margin 行为的前提。没有它，::before 会被忽略，外边距照常塌陷。
所以兼容方案必须包含：
.parent::before { content: ""; display: table; }-
.parent { *zoom: 1; }—— 这不是可选补丁，是必要 hack - 不能用
zoom: 1替代*zoom: 1，否则现代浏览器会误触发缩放
真正容易被忽略的，是 ::before 的 display 值和 IE 兼容性之间的耦合关系：你改掉 display: table，哪怕换成 display: flex，在老浏览器里就直接失效；你漏掉 *zoom: 1，在 IE6/7 里就白写。这不是“多写一行”的问题，而是两个条件共同构成一个最小可行解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
