.clearfix 必须加在直接包裹浮动子项的父容器上，且 ::after 伪元素需满足 content 非空、display 为 table/block、父容器无干扰 overflow，三者缺一不可。
直接给父容器加 .clearfix 类，配合正确的 ::after 伪元素写法，就能可靠清除浮动塌陷；但漏掉 content: ""、写错 display 值，或加在错误的父级上，都会让整个方案失效。
为什么 .clearfix::after 写了却没用
常见现象是父容器高度仍为 0，开发者工具里也看不到伪元素。这不是浏览器不支持，而是三个硬性条件缺一不可：
-
content必须存在且非空，写成content: ""或content: " "都行，但content: none或干脆不写，伪元素就不会渲染 -
display必须是能参与块级布局计算的值，display: table最稳妥（IE8+ 兼容、自动触发 BFC、避免 margin collapse），display: block也可用，但不能用inline或inline-block - 父容器自身不能有
overflow: hidden、auto或scroll—— 这些会干扰clear: both的行为，导致清除逻辑被压制
display: table 和 display: block 到底怎么选
两者都能让伪元素成为块级占位，但表现不同：
-
display: table会生成匿名表格单元格，天然具备清除浮动的能力，且在 IE8/9 下更稳定，推荐作为默认选择 -
display: block更直观，但若父容器有垂直方向的margin，可能因 margin collapse 导致伪元素“看不见”，需要额外加height: 0; visibility: hidden;来规避 - 别用
display: flex或grid—— 它们虽能撑高，但会改变伪元素的布局上下文，反而让clear: both失效
clearfix 必须加在哪个父容器上
必须加在「直接包裹浮动子项」的父容器上，多一层或少一层都不行：
立即学习“前端免费学习笔记（深入）”；
- 如果 HTML 是
<div class="outer"><div class="inner"><div style="float:left"></div></div></div>，那么.clearfix要加在.inner上，不是.outer - 多个嵌套浮动层时，每一级「包含浮动子项」的容器都得单独加
.clearfix，外层加了不等于内层自动生效 - Vue/React 组件中，不要直接加在组件根节点（如
<div class="my-component">），而应加在模板里那个明确包裹 <code>v-for浮动项的<div> 上 <h3>现代项目里还要不要写 clearfix</h3> <p>取决于是否还在用 <code>float：- 如果父容器用了
display: flex或display: grid，子元素即使写了float: left也基本无效，此时加.clearfix不仅无用，还可能干扰align-items或引发嵌套滚动 - 如果项目需兼容 IE11 或旧版 Safari，且无法移除浮动逻辑（比如依赖 Bootstrap 4 的
.row），那.clearfix仍是事实标准，记得补*zoom: 1兜底 IE6–7 - 真正容易被忽略的是：有些第三方 UI 库（如老版本 Ant Design）内部已用
clearfix，重复添加会导致双倍清除，反而让布局错乱
- 如果父容器用了
