用：:after 清除浮动必须设 display:table 或 block 以触发 BFC，仅 content:”” 无效；display:table 更优，可避免外边距合并；Flex/Grid 布局下无需伪元素清浮动。
伪元素 清除浮动导致的高度塌陷
用 ::after 清浮动是常见做法，但很多人直接写 content: "" 就完事，结果父容器高度还是塌、子元素下边距（margin-bottom）依然穿透。根本原因是没触发 BFC，也没处理 display 类型。
- 必须设
display: table或display: block，仅content不足以生成可参与布局的框 - 推荐用
display: table：它天然不占额外高度，且能可靠触发 BFC，比display: block+clear: both更干净 - 别用
display: inline-block—— 它会引入基线对齐带来的意外空白，进一步干扰高度计算 - 示例：
.clearfix::after {content: ""; display: table; clear: both;}
伪元素撑开容器却吃掉子元素 margin-bottom
当父容器只含浮动子项，又用 ::after 清浮动时，子元素的 margin-bottom 常常“消失”——实际是发生了外边距合并（margin collapse），因为伪元素默认是块级且紧贴子项末尾。
- 加
height: 0或line-height: 0可消除伪元素自身高度，减少与子项 margin 的交互机会 - 更稳妥的是把伪元素设为
display: table（已提过），它不参与外边距合并，天然隔离 margin 传播 - 避免用
visibility: hidden或opacity: 0替代display—— 它们仍占据文档流位置，照样引发 margin collapse - 如果子项本身需要底部留白，优先改用
padding-bottom在父容器上加，而不是依赖子项的margin-bottom
Flex/Grid 布局下伪元素还必要吗
完全没必要。Flex 容器和 Grid 容器天然不发生高度塌陷，子项浮动对其 layout mode 无影响，::after 清浮动不仅无效，还可能因 display 冲突引入新问题。
- 检查父容器是否已设
display: flex或display: grid—— 是的话，立刻删掉所有::after清浮动代码 - 浮动本身在 Flex/Grid 中已退化为“仅影响文本环绕”的行为，不再影响布局流，强行清毫无意义
- 若旧项目混用浮动与 Flex，应逐步将浮动子项改为
align-self或margin控制位置，而非靠伪元素补救
兼容性与现代替代方案
::after 清浮动在 IE8+ 都可用，但 IE8 不支持 display: table，得降级用 display: block + clear: both。不过现在真正要警惕的不是兼容性，而是思维惯性。
立即学习 “ 前端免费学习笔记（深入）”；
- Post-CSS（如 PostCSS autoprefixer）不会帮你加伪元素，它只处理属性前缀；清浮动逻辑必须手写且易遗漏
- 用
overflow: hidden或overflow: auto也能触发 BFC 清浮动，但会截断阴影、溢出动画等视觉效果，副作用比伪元素更隐蔽 - 最省心的解法：别用浮动做布局。用
display: inline-block配合vertical-align，或直接上 Flex —— 伪元素那点“技巧”，本质是给过时模式打补丁
伪元素不是万能胶，它解决的是特定历史场景下的布局断裂。一旦你开始纠结 ::after 该设什么 display、要不要加 height，往往说明真正该动的是布局模型本身。
