.clearfix::after解决高度塌陷需三行缺一不可：content: ""（伪元素渲染前提）、display: table（创建bfc且稳定）、clear: both（清除浮动）；必须加在直接包裹浮动子项的父容器上，否则无效。

.clearfix::after 能解决高度塌陷，但写错一行就完全失效——不是“没效果”，而是伪元素压根没生成。

为什么 .clearfix::after 加了却看不到效果？

最常见原因是三行关键声明缺一不可，漏掉任意一个，浏览器就当它不存在：

• content: "" 被省略、写成 content: none 或空格字符串（如 content: " "）→ 伪元素不渲染，后面所有样式都白搭
• display 没设，或设成 inline/inline-block → 无法触发块级清除行为
• clear: both 被写成 clear: left 或被父容器的 overflow: hidden 抑制 → 清除逻辑被浏览器忽略

.clearfix 必须加在哪一层？

只对「直接包裹浮动子项」的父元素生效，加错位置等于没加：

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

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

下载

• HTML 是 <div class="outer"><div class="inner"><div style="float:left"></div></div></div> → 类必须加在 .inner 上，不是 .outer
• Vue/React 中，别加在组件根节点（如 <div class="card">），而应加在模板里那个明确包裹 <code>v-for 或 map 出来的浮动项的容器上
• 嵌套浮动结构（比如外层 float: left 的列表项 + 内层图文浮动）→ 每一级含浮动子项的容器都要单独加 .clearfix

display: table 还是 display: block？

推荐无条件用 display: table，它比 block 更稳：

• display: table 天然创建 BFC，不继承 line-height，避免因外边距合并导致伪元素“看不见”
• display: block 在某些安卓 WebView 下会渲染出 1px 空隙，必须额外补 height: 0; visibility: hidden;
• 绝对不要用 display: flex 或 display: grid → 它们会让 clear: both 失效

哪些地方加了反而坏事？

.clearfix 不是万能补丁，强行套用会引入新问题：

• 父容器已设 overflow: hidden、display: flow-root 或 float → 它本身就在 BFC 中，再加伪元素属于冗余，还可能裁剪 position: absolute 的下拉菜单
• 父容器是 display: flex 或 display: grid → 浮动在这些上下文中本就失效，clear: both 被忽略
• 父容器设了 height 或 max-height → 伪元素撑不开显式高度，清除失去意义

真正容易被忽略的是：你是不是还在检查 DevTools 里父元素的 offsetHeight，却忘了先打开「Show user agent shadow DOM」才能看到 ::after 是否真实存在。