::after伪元素清除浮动的本质是让父容器重新建立包含块并感知浮动子元素：通过插入display: table/block且clear: both的匿名元素撑开高度，现代推荐flow-root替代。
为什么 ::after 伪元素能清除浮动
浮动元素脱离文档流，导致父容器高度塌陷——::after 不是“修复”浮动，而是让父容器“感知到”浮动子元素的存在。它在父容器末尾插入一个匿名块级元素，并强制其清除两侧浮动，从而撑开父容器。
-
::after必须设为display: table或display: block，且需声明clear: both - 不能只靠
content: ""：没display就不生成框，清浮无效 -
visibility: hidden或height: 0可隐藏该伪元素，但不能用display: none（会彻底移除渲染框）
.clearfix 的最小必要 CSS 写法
很多项目还在用带 zoom: 1 的 IE6 兼容写法，现代项目只需最简四行。多写的属性不仅冗余，还可能干扰 Flex/Grid 布局。
- 必须包含：
content: ""、display: table、clear: both - 推荐加
height: 0防止意外占位，但不是必需 - 不用
font-size: 0或line-height: 0：对table显示模式无效
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
什么时候不该用 .clearfix
它只是对“浮动布局”的补救手段。一旦父容器本身用了 display: flex、display: grid 或 overflow: hidden 等触发 BFC 的方式，再套 .clearfix 不仅多余，还可能引发嵌套清除异常。
- Flex 容器内子项浮动后，父容器仍能正确计算高度——此时
.clearfix完全无效 -
overflow: auto已触发 BFC，清除浮动效果和.clearfix等价，二者共存无意义 - Vue/React 组件中动态切换布局模式时，硬编码
.clearfix类容易遗漏或误用
兼容性与现代替代方案的取舍
::after 清除法在 IE8+ 都可用，但 IE8 不支持 display: table，所以实际要回退到 display: block。不过现在几乎没人需要保 IE8，强行兼容反而增加维护成本。
立即学习“前端免费学习笔记（深入）”；
- 如需支持 IE8，改用
display: block+visibility: hidden，并保留zoom: 1触发 hasLayout - 新项目优先用
display: flow-root：一行解决，语义清晰，且不影响后代定位上下文 -
flow-root在 Safari 15.4+、Chrome 58+、Firefox 59+ 均已稳定，CanIUse 上绿条很长
::after 样式，却忘了检查父容器是否被 position: absolute 或 transform 意外变成了新的 containing block，导致清除失效。 
