.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 必须加在哪一层？
只对「直接包裹浮动子项」的父容器生效，加错层级等于白写：
- HTML 是
<div class="outer"><div class="inner"><div style="float:left"></div></div></div>→ 类必须加在.inner上，不是.outer - Vue/React 中，别加在组件根节点（如
<div class="card">），而应加在模板里那个明确包裹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 不仅多余，还可能干扰对齐或引发嵌套滚动。
