::after 是独立盒子，盒模型默认 content-box 且不继承父元素 box-sizing；参与文档流取决于 display 和 position；清除浮动需 display: block + bfc 触发。
伪元素 ::after 本身就是一个独立盒子，它的布局表现完全由盒模型规则决定——不是“受主元素影响”，而是它自己就遵循 content-box 或 border-box 的尺寸逻辑。
伪元素 ::after 默认用的是 content-box
即使父元素设了 box-sizing: border-box，::after 也不会继承这个设置。它默认按 content-box 解析 width 和 height：你写 width: 100px; padding: 10px; border: 2px solid，最终占位宽度就是 124px（100 + 2×10 + 2×2）。
- 常见翻车现场：给按钮加
::after做装饰边框，又设了width: 100%，结果撑出容器外——因为没意识到它没走border-box - 修复方式：必须显式声明
.btn::after { box-sizing: border-box; } - 通配写法要带逗号：
* , *::before, *::after { box-sizing: border-box; }，只写*不生效
::after 是否参与文档流，取决于 display 和 position
伪元素的盒模型始终存在，但“是否挤别人”得看渲染上下文：
-
display: block或inline-block：生成真实盒子，参与正常流；margin可能折叠，padding/border影响尺寸 -
position: absolute或fixed：脱离文档流，不挤内容，但width/height/padding/border仍按盒模型计算（只是不占空间） -
display: contents：直接不生成盒子，整个伪元素“消失”，box-sizing失效
清除浮动时 ::after 的 clear 为何常失效
根本原因不是 ::after 写错了，而是父容器没创建 BFC，导致伪元素无法对浮动子项起作用。
-
::after必须设display: block（默认是inline，clear对它无效） - 父容器需触发 BFC：
overflow: hidden、display: flow-root或float等 -
content: ""不能省略，也不能写成content: " "（空格会带来额外宽度） - 现代项目优先用
display: flow-root，一行解决，无副作用；兼容性不足时再回退到::after+clear
真正容易被忽略的点在于：伪元素的盒模型是“真实存在的”，但它的布局权重完全由自身属性决定，而不是宿主元素的样式传导——哪怕你把父元素所有盒模型相关属性都调得很稳，::after 该错位还是会错位，除非你亲手管住它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
