必须写content: ""、加在浮动子项的直接父容器上、避免在flex/grid等现代布局中使用：content: ""是伪元素渲染前提，缺则不生效；加错层级或上下文冲突导致90%失效。

直接写 .clearfix::after 三行样式就能解决高度塌陷，但漏掉 content: ""、加错父容器、或在现代布局里硬套，90% 的“没效果”都出在这三处。

为什么只写 content: "" 的 ::after 没用

浏览器根本不会渲染这个伪元素——content 是强制属性，不是可选配置。常见翻车点包括：content: none、content: " "（带空格）、或直接省略该声明。必须严格写成 content: ""，哪怕值为空字符串，浏览器才会生成一个不可见但参与布局的节点。

display: table 和 display: block 怎么选

display: table 是更稳妥的选择，尤其当项目需兼容旧环境：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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——那个伪元素根本不会参与布局。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！