::after伪元素能撑开浮动容器高度，因其插入父容器末尾并设为display: table、clear: both、content: ""，从而参与布局并下压至浮动元素下方，使父容器重新计算高度。
为什么::after伪元素能撑开浮动容器高度
浮动元素脱离文档流，父容器计算高度时直接忽略它们，导致height为 0，背景图自然没空间渲染。而::after伪元素插入在父容器末尾，设为display: table后成为块级参与布局，并用clear: both强制下压到所有浮动元素下方——这个“占位”动作让父容器重新获得高度参考。
.clearfix::after写法必须包含的三个关键属性
缺一不可，漏掉任意一个都会失效：
-
content: ""：伪元素必须有内容（哪怕为空），否则不渲染 -
display: table（或block）：inline默认值无法触发clear效果 -
clear: both：确保它避开左右两侧所有浮动，真正“沉到底部”
常见错误是只复制了content和clear，却忘了display，结果伪元素仍是行内，clear完全不生效。
加了::after还是没效果？先查这三处
不是代码写错了，而是上下文干扰了它的行为：
- 父容器本身是
display: inline或inline-block——::after在内联上下文中可能不参与高度计算，需先加display: block - 父容器设置了
overflow: hidden或auto，和clear伪元素冲突，导致BFC提前截断布局流 - 父容器有
margin-collapse问题：比如最后一个子元素带margin-bottom，而伪元素是display: block，会触发外边距合并，视觉上像“没撑开”
比起overflow: hidden，::after更可控但更易被覆盖
它不改变父容器的溢出行为，不会意外裁剪position: absolute子元素或阴影，这是优势；但劣势也很明显：
- 如果父容器已有
display: flex或grid，伪元素的clear会被忽略（Flex/Grid 容器内float和clear均无效） - 若父容器用了
transform或will-change，某些旧版 Safari 会跳过伪元素渲染 - CSS 优先级高过它的规则（比如内联
style="clear: none"）会直接让它失效
真正卡住人的，往往不是伪元素怎么写，而是它被其他布局上下文悄悄屏蔽了——修之前，先确认父容器是否还处在普通文档流里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
