必须写content: ""、加在浮动子项的直接父容器上、避免在flex/grid等现代布局中使用：content: ""是伪元素渲染前提，缺则不生效；加错层级或上下文冲突导致90%失效。
直接写 .clearfix::after 三行样式就能解决高度塌陷，但漏掉 content: ""、加错父容器、或在现代布局里硬套，90% 的“没效果”都出在这三处。
为什么只写 content: "" 的 ::after 没用
浏览器根本不会渲染这个伪元素——content 是强制属性，不是可选配置。常见翻车点包括：content: none、content: " "（带空格）、或直接省略该声明。必须严格写成 content: ""，哪怕值为空字符串，浏览器才会生成一个不可见但参与布局的节点。
display: table 和 display: block 怎么选
display: table 是更稳妥的选择，尤其当项目需兼容旧环境：
-
display: table天然创建匿名 BFC，不继承line-height，避免外边距合并导致的额外高度 -
display: block在某些场景下容易出问题：比如父容器设了font-size: 0或嵌套在inline-block中时，可能产生意外间隙；IE8/9 下还可能多出 1px 高度 - 别用
display: flex或display: grid——它们会改变伪元素的布局上下文，clear: both直接失效
clear: both 必须加在伪元素上，不能加在父容器上
clear 只对块级盒生效，且仅影响该盒自身所在行的位置。加在父容器上完全无效，因为父容器本身没浮动，这个声明没有作用对象。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.clearfix::after { clear: both; }—— 让伪元素落到所有浮动元素下方，从而撑开父容器底部 - ❌ 错误：
.clearfix { clear: both; }—— 对父容器高度计算毫无影响 - ⚠️ 注意：
clear不会改变浮动子元素的位置，只影响伪元素所在行的垂直位置
什么时候根本不该用 ::after 清浮动
强行套用反而引入新问题：
- 父容器已设
overflow: hidden、display: flow-root或position: absolute—— 它本身就在 BFC 中，再加::after属于冗余，还可能因 BFC 重叠引发裁剪或定位异常 - 父容器是
display: flex或display: grid—— 浮动在这些上下文中本就失效，清除逻辑无意义 - 父容器设了
height或max-height—— 伪元素无法突破固定高度，撑不开 - CSS-in-JS 环境中类名被哈希化，
.clearfix选择器可能不匹配，建议改用属性选择器（如[data-clear]）或封装为组件逻辑
真正麻烦的从来不是写不对这三行 CSS，而是加错了层级、或者在 Flex 容器里徒劳地塞 ::after——那个伪元素根本不会参与布局。
