.clearfix::after没反应是因为content缺失或值非法（如content:none）、display未设为table/block导致clear失效，或父容器overflow:hidden、flex/grid布局使清除机制失效。

.clearfix::after 能清浮动，但“完美”不在于写得多 fancy，而在于三行关键样式一个不漏、加在对的位置、避开已失效的上下文。

为什么 .clearfix::after 写了却完全没反应？

不是浏览器问题，而是伪元素压根没生成或没参与布局：

• content: "" 被省略、写成 content: none 或 content: " "（带空格）→ 浏览器当它不存在，后续所有样式无效
• display 没设，或设成 inline/inline-block → 无法触发块级清除行为，clear: both 失效
• 父容器有 overflow: hidden、auto 或 scroll → 这些会压制 clear 的布局计算，伪元素被“截断”
• DevTools 默认不显示伪元素 → 没勾选「Show user agent shadow DOM」就以为没生效

display: table 为什么比 display: block 更可靠？

它解决的是底层渲染稳定性问题，不是语义偏好：

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

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

下载

• display: table 天然创建匿名 BFC，不继承 line-height、不参与外边距合并（margin collapse），避免伪元素因上下文干扰“看不见”
• display: block 在某些安卓 WebView 下会渲染出 1px 空隙，必须额外加 height: 0; visibility: hidden; 才能隐藏
• display: inline-block 绝对不用：受 HTML 空白符影响，且不创建 BFC
• display: flex 或 display: grid 必须避开：它们让 clear: both 完全被忽略

类该加在哪一层？加错等于白写

只对「直接包裹浮动子项」的父容器生效，层级错一阶就失效：

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

哪些情况根本不该用 ::after 清浮动？

强行套用不仅无效，还会引入新问题：

• 父容器已是 display: flex 或 display: grid → 子项加 float: left 本就无效，clear: both 不起作用也不该起作用
• 父容器设了 height 或 max-height → 伪元素撑不开显式高度，清除失去意义
• 父容器用了 transform、filter 或 contain: layout → 可能隔离 clear 行为，堆 .clearfix 没用
• 父容器已触发 BFC（如 overflow: hidden、display: flow-root、float 自身）→ 冗余，还可能裁剪 position: absolute 的下拉菜单

真正容易被忽略的，是你还在检查父容器的 offsetHeight，却没确认它是否仍在正常文档流里；或者一边用 display: flex 做整体布局，一边给子项加 float: left，再拼命调试 ::after —— 那不是清浮动失败，是布局模型冲突。