::before或::after通过插入参与文档流的块级框（如display: table）隔离父子元素，阻断margin直接接触从而防止塌陷；防top用::before，防bottom用::after；flex/grid容器天然不塌陷，无需伪元素。
为什么::before或::after能阻止父子边距塌陷
伪元素本身不直接“修复”塌陷，而是通过插入一个**参与文档流的块级框**，在父元素和子元素之间制造物理隔离。只要这个框存在（哪怕content: ""），且具备块级特性，就能打断父子间 margin 的直接接触，从而避免合并。
::before加display: table比display: block更稳妥
很多写法只设content: "" + display: block，但这样仍可能触发外边距合并——因为block元素默认参与 margin 传播。而display: table天然不参与 margin 合并，也不引入基线对齐空白，是更干净的选择。
-
display: table：推荐，零高度、不合并 margin、兼容 IE8+ -
display: block：可用，但需额外加clear: both（仅对浮动有效）或height: 0来抑制干扰 -
display: inline-block：避免使用，会因基线对齐产生意外空白，反而加剧高度计算混乱
只用::before还是::after？看你要防哪一端
防margin-top塌陷，用::before；防margin-bottom塌陷，用::after。两者互不影响，也可同时用——但多数场景只需其一。
- 父子顶部塌陷（子元素
margin-top穿透）：.parent::before { content: ""; display: table; } - 父子底部塌陷（子元素
margin-bottom被吞）：.parent::after { content: ""; display: table; } - 如果父容器内含浮动子项且需清浮动，
::after更常用，但此时重点是clear: both，而非防塌陷
现代布局中伪元素清塌陷容易被忽略的点
Flex 和 Grid 容器天然不发生 margin 塌陷，伪元素在这里不仅无效，还可能因display冲突导致布局异常。但开发者常因惯性保留旧代码，尤其在混合浮动与 Flex 的遗留项目里。
- 检查父元素是否已设
display: flex或display: grid——是的话，删掉所有::before/::after清塌陷逻辑 -
display: flow-root是更语义化的替代方案，但 IE 不支持；若需兼容老浏览器，::before + display: table仍是可靠 fallback - 伪元素无法解决兄弟元素间的塌陷（如两个相邻
div），那种情况得靠统一控制 margin 方向或用 BFC 包裹单个元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
