::after负责清除浮动，::before防止外边距折叠；仅用::after会导致顶部margin塌陷，仅用::before则无法撑开父容器高度，二者功能互补、缺一不可。
::before 和 ::after 必须成对使用，缺一不可——单独只用 ::after 清浮动，::before 不写，会导致旧版 Safari 外边距折叠（margin collapse）异常；只写 ::before 则根本不清浮动。
为什么必须同时用 ::before 和 ::after
::after 负责清除浮动：它在父容器末尾插入一个“视觉上不可见但渲染上存在”的块级元素，并设置 clear: both，强制换行、撑开高度；::before 不参与清浮动，而是防止父容器与第一个浮动子元素之间的外边距折叠——它插入一个 display: table 元素，触发 BFC 边界，隔离 margin 传递。
常见错误现象：
- 只加
::after后，父容器顶部空白消失，首子元素上边距“吃掉”了 - 只加
::before后，父容器高度仍为 0，浮动子元素溢出 - 用
display: block替代display: table，在 IE8 下可能失效（table更稳妥）
display: table 比 display: block 更可靠的原因
display: table 在伪元素中能稳定触发 BFC，且不破坏内联样式继承链；display: block 虽然也能清浮动，但在某些旧浏览器（如 IE8）中对 clear 的解析不稳定，且无法阻止外边距折叠。
实操建议：
- 始终用
display: table，不要简化为block -
content: ""必须显式声明，否则伪元素不渲染 - 不要给
::before加clear，它不负责清浮动——加了也无效
什么时候不该套 .clearfix
如果父容器已通过其他方式建立 BFC，再加 .clearfix 属于冗余操作，甚至可能干扰布局。
以下情况无需 .clearfix：
- 父容器设置了
overflow: auto或overflow: hidden - 父容器用了
display: flow-root（现代标准方案，推荐优先用） - 父容器是
flex或grid容器
这些方式本身就能包含浮动子元素，且比双伪元素更语义清晰、维护成本更低。
兼容性与现代替代方案的取舍
双伪元素方案（::before + ::after）仍需保留，主要为兼容 IE9–IE11 及部分旧版 Safari；但新项目应优先尝试 display: flow-root —— 它一行代码解决所有问题，且无伪元素副作用。
容易被忽略的点：
-
flow-root不兼容 IE（全版本都不支持），若需支持 IE，必须回退到双伪元素 - 伪元素的
content: ""在部分低版本 Android 浏览器中可能被忽略，务必测试真机 - 不要把
.clearfix当万能胶到处贴——它只解决“浮动导致父容器塌陷+外边距折叠”这一特定组合问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
