.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 更可靠？
它解决的是底层渲染稳定性问题，不是语义偏好：
-
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">），而应加在模板里那个明确包裹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 —— 那不是清浮动失败，是布局模型冲突。
