.clearfix::after必须写content: ""、display: table、clear: both三行，缺一不可：content: ""触发伪元素实例化，display: table创建BFC并撑高，clear: both清除浮动；漏任一属性则伪元素不渲染或清除失效。
直接给父容器加 .clearfix::after 就能解决高度塌陷，但前提是它被加在正确的位置、满足三个硬性条件，否则伪元素压根不参与布局——你看到的“没效果”，90% 是因为 content: "" 被漏掉，或父容器本身已触发 BFC。
为什么 .clearfix::after 必须写这三行？
缺一不可，不是“可选”：
-
content: ""—— 没这句，伪元素根本不渲染，display和clear全白搭 -
display: table—— 比block更稳：天然创建匿名 BFC，不继承line-height，避免外边距合并导致的高度偏差 -
clear: both—— 真正起作用的部分，强制该伪元素落到所有浮动元素下方，从而撑开父容器底部
哪些地方加了反而坏事？
不是所有父容器都适合套 .clearfix：
- 父容器已设
overflow: hidden或display: flow-root—— 它本身就在 BFC 中，再加::after属于冗余，还可能裁剪position: absolute的下拉菜单 - 父容器是
display: flex或display: grid—— 浮动在 flex/grid 子项中本就失效，清除逻辑无意义 - 父容器是
position: absolute或fixed—— 伪元素的clear对脱离文档流的父容器无效 - 父容器已设
height或max-height—— 伪元素撑不开高度，清浮动失去意义
IE6/7 兼容要补什么？
现代项目基本不用管，但如果真要兼容（比如老后台系统）：
立即学习“前端免费学习笔记（深入）”；
- 必须加
*zoom: 1到父容器上，触发 hasLayout（仅 IE6/7 识别，其他浏览器忽略） - 不要用
overflow: hidden替代，它会意外裁剪溢出内容 -
::after写法本身在 IE8+ 才支持，IE7 及更早只能靠:after单冒号 +*zoom: 1
调试时最常被忽略的点
伪元素是否真实生效，不能只看 CSS 文件写了没，得看 computed styles：
- 打开 DevTools → Elements → 找到父元素 → 查看
::after是否出现在 computed 样式里 - 确认它有
display: table和clear: both，且content值不是none - 检查父容器是否被
contain: layout、transform或filter创建了新的层叠上下文，这些可能隔离clear行为 - 在 CSS-in-JS 环境（如 styled-components）中，类名哈希化后
.clearfix可能不匹配，建议改用属性选择器或组件内联样式
真正容易翻车的，从来不是代码怎么写，而是你没意识到：父容器是否还在文档流里、有没有别的样式偷偷覆盖了 ::after、以及——你是不是还在用 float 做整体布局。
