单用 ::after 无法同时解决 margin 塌陷和浮动问题，因其仅通过 clear: both 清除浮动，但不能触发 BFC 阻断外边距合并；必须配合 ::before 使用 display: table 才能同时实现 BFC 创建与浮动清除。
为什么单用 ::after 无法同时解决 margin 塌陷和浮动问题
只加 ::after 的常见写法是：.clearfix:after { content: ""; display: block; clear: both; }。它确实能撑开父容器高度、闭合浮动，但对父元素自身的 margin-top 或 margin-bottom 完全没防护——一旦父元素没上边框、没上内边距，而第一个子元素又设了 margin-top，外边距就会合并，父容器视觉上“上移”。这不是清除浮动失败，而是根本没处理 BFC 边界问题。
::before + ::after 组合的关键作用：触发 BFC 并闭合浮动
双伪元素法本质是分两步走：::before 负责创建 BFC 边界阻断 margin 合并，::after 负责清除浮动。必须同时满足三个条件才能生效：
-
::before和::after都要设置content: ""（空字符串不可省略） -
::before必须用display: table（不能用block），这是触发 BFC 的关键 -
::after必须有clear: both，且最好也用display: table保持一致性
IE6/7 兼容需额外加 *zoom: 1，这是触发 hasLayout 的 hack，不是可选优化项。
标准 .clearfix 写法与常见错误对比
正确写法（推荐直接复制）：
立即学习“前端免费学习笔记（深入）”；
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
容易踩的坑：
- 把
::before写成display: block→ 失去 BFC 效果，margin 塌陷照旧 - 漏掉
content: ""→ 伪元素不渲染，整个规则失效 - 只写
::after不写::before→ 浮动清了，但父子 margin 还会合并 - 在 Flex/Grid 容器上滥用
.clearfix→ 这类容器本身已是 BFC，加了反而可能干扰布局
什么时候不该用双伪元素？替代方案更合适
双伪元素不是银弹。以下场景建议换方案：
- 父容器已用
display: flex或display: grid→ 它们天然形成 BFC，无需额外清除 - 只需防 margin 塌陷、无浮动 → 直接给父元素加
overflow: hidden更轻量 - 现代项目且不需要 IE 支持 → 可改用
display: flow-root，一行解决 BFC + 清浮动 - 浮动仅用于图文环绕 → 不需要清除，文字本身仍在文档流中，父容器高度不会塌陷
真正需要双伪元素的，是那些仍依赖 float 做多栏布局、又必须兼容老浏览器、同时还要求父子 margin 严格分离的混合场景——这种地方少一个 display: table，就可能让整块布局偏移几像素，而且很难一眼定位。
