::after能撑开父容器高度是因为它作为普通流内元素，设置clear: both后被推至浮动元素下方，成为最后一个占位节点；标准写法需同时满足content: ""、display: table（或block）、clear: both。
为什么 ::after 能撑开父容器高度
浮动元素脱离文档流，导致父容器“看不见”子元素，高度塌陷为 0。而 ::after 是在父元素内容末尾插入一个伪元素，它默认是普通流内元素，能感知浮动布局——只要给它设置 clear: both，它就会被“推到所有浮动元素下方”，从而把父容器高度撑起来。
关键不是“清浮动”这个动作本身，而是这个伪元素成了浮动之后的最后一个流内占位节点。
::after 清浮动的标准写法和必要参数
最简可靠写法必须同时满足三点，缺一不可：
-
content: ""—— 伪元素默认不渲染，没 content 就等于没这个节点 -
display: table或display: block—— 必须是块级或表格级，inline无法触发 clear 行为 -
clear: both—— 确保它落到所有左/右浮动元素之下
推荐用 display: table：它天然不占据额外 margin，且在 IE8+ 完全兼容；display: block 也行，但要注意父容器是否设置了 overflow: hidden 等可能截断它的属性。
立即学习“前端免费学习笔记（深入）”；
/* 推荐 */
.clearfix::after {
content: "";
display: table;
clear: both;
}为什么直接写 .clearfix::after 有时没效果
常见失效原因不是语法错，而是作用对象或时机问题：
- 父容器本身设置了
height、max-height或overflow: hidden，硬性压制了高度撑开 - 伪元素被其他 CSS 覆盖，比如某处写了
*::after { display: none } - 父容器是
flex或grid容器 —— 此时浮动本就不该存在，::after清浮动逻辑完全无效 - HTML 中父元素没有闭合，或结构嵌套错乱，导致选择器根本没匹配到目标元素
调试时优先检查 computed styles，确认 ::after 是否真实渲染、是否具有 display 和 clear 值。
现代开发中还该用 ::after 清浮动吗
如果项目仍需支持 IE8–IE11，或者你正在维护老代码，那它仍是安全、明确、无副作用的选择。但新项目中，更推荐从源头规避：
- 用
display: flow-root（Chrome 64+/Firefox 58+/Safari 15.4+）—— 单属性替代整个 clearfix 类，语义清晰，无伪元素干扰 - 改用
flex或grid布局，浮动本身就不应再作为布局手段 - 若只是图文环绕，优先考虑
float+margin配合自然流，而非靠 clearfix 撑高容器
真正容易被忽略的是：很多人把 clearfix 当成“万能修复”，却没意识到它只是对错误布局的补救——一旦父容器里混用了 flex、transform、contain 等会创建 BFC 的属性，::after 可能变得多余甚至引发意外交互。
