::after能撑开父容器高度是因为浮动元素脱离文档流导致父容器塌陷，而::after通过content: ""、display: table和clear: both生成一个参与BFC的块级占位节点，强制父容器延伸至其位置。
为什么 ::after 能撑开父容器高度？
因为浮动元素脱离文档流，父容器无法感知其高度，导致“塌陷”。::after 本身是伪元素，默认为 inline，但通过设置 display: table 或 display: block 并配合 clear: both，它会参与 BFC 布局，在浮动元素下方生成一个“占位块”，强制父容器延伸到该位置。
::after 清除浮动的标准写法及关键参数
最稳妥的写法不是简单加 clear: both，而是要同时满足：生成内容、设为块级、触发 BFC、清除浮动。常见错误是漏掉 content: ""（没这句伪元素不渲染）或用 display: inline（无法清除）。
-
content: ""—— 必须存在，哪怕为空字符串 -
display: table—— 推荐，比block更可靠，避免 IE6/7 下 margin 双倍等问题 -
clear: both—— 确保位于所有浮动元素下方 - 不加
height或overflow等干扰属性，否则可能影响布局逻辑
示例：
.clearfix::after {
content: "";
display: table;
clear: both;
}
什么时候不该用 ::after 清除浮动？
当父容器本身已触发 BFC（如设置了 overflow: hidden、display: flow-root、float 或 position: absolute），再叠加 ::after 属于冗余，还可能引发意外交互（比如 overflow: hidden + ::after 在某些缩放场景下裁剪伪元素）。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root是现代首选，原生支持清除浮动且无副作用 - Flex 或 Grid 容器内部无需清除浮动——浮动在 flex/grid 子项中基本失效
- 如果只兼容 IE8+，
display: table比display: block更稳；IE7 及更早需回退到zoom: 1触发 hasLayout
容易被忽略的细节：伪元素的继承与定位上下文
::after 默认继承父元素的所有可继承样式（如 color、font-size），但不会继承 position 或 z-index。若父容器是 relative，伪元素会按正常流排布；若父容器是 absolute 或 fixed，伪元素仍受其包含块约束，但清除效果可能失效——因为 clear 对脱离文档流的父容器无效。
- 确保父容器自身未脱离文档流（即非
position: absolute/fixed） - 避免给
::after设置position: absolute，否则clear失效 - 不要依赖
visibility: hidden或opacity: 0隐藏伪元素——它必须真实参与布局才能撑高
真正起作用的从来不是“看起来有没有”，而是“浏览器是否把它算进高度计算里”。
