.clearfix::after 清浮动必须三者齐全：content: ""、display: table、clear: both；缺一伪元素不渲染，父容器仍塌陷；须加在直接包裹浮动子项的父容器上，且禁用flex/grid布局下滥用。

直接加 .clearfix::after 就能清浮动，但三行样式缺一不可：必须写 content: ""、display: table、clear: both；漏掉任意一个，伪元素压根不生成，父容器高度照样塌陷。

为什么 .clearfix::after 加了却没效果？

不是浏览器不支持，而是关键条件被破坏：

• content: "" 被省略、写成 content: none 或带空格的 content: " " → 伪元素不渲染，后续所有样式无效
• display 没设，或设成 inline/inline-block → 无法触发块级清除行为，clear: both 失效
• clear: both 被父容器的 overflow: hidden 抑制，或父容器本身是 display: flex → 浏览器忽略清除逻辑
• DevTools 里没打开「Show user agent shadow DOM」→ 看不到 ::after 是否真实存在，误判为“没生效”

.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 完全失效

真正容易被忽略的，是你还在用 float 做整体布局 —— 如果父容器已经是 display: flex 或 display: grid，子项加 float: left 本就无效，此时再套 .clearfix 不仅多余，还可能干扰对齐或引发嵌套滚动。