必须写content: ""、display: table、clear: both，因content: ""创建伪元素，display: table确保BFC避免外边距合并，clear: both才真正清除浮动；.clearfix须加在直接包裹浮动子项的父元素上。
直接用 .clearfix::after 三行样式就能生效，但漏掉 content: "" 或加错父元素层级，90% 的“没效果”都出在这两处。
为什么必须写 content: ""、display: table、clear: both？
这三行不是风格偏好，是浏览器渲染机制决定的硬性条件：
-
content: ""—— 没这句，伪元素根本不会被创建，后面所有样式都不参与布局；写成content: ;或空格字符串（content: " "）也会被忽略 -
display: table—— 比block更可靠：它天然创建匿名 BFC，不继承line-height，避免因外边距合并或行内格式化上下文导致撑高失败；inline-block绝对不用，受空白符干扰且不建 BFC -
clear: both—— 真正起清除作用的部分，但它只对块级框生效；若父容器是display: inline或inline-flex，这行就完全无效
.clearfix 该加在哪个 HTML 元素上？
必须加在「直接包裹浮动子项」的父元素上，多一层或少一层都会失效：
- HTML 是
<div class="outer"><div class="inner"><div style="float:left"></div></div></div>→.clearfix要加在.inner上，不是.outer - Vue/React 中，不要加在组件根节点（如
<div class="my-component">），而应加在模板里那个明确包裹v-for浮动项的<div> - 如果父容器本身已设
overflow: hidden、display: flow-root或float，它自己已在 BFC 中，再加.clearfix属于冗余，还可能裁剪position: absolute的下拉菜单
现代项目里还要手写 .clearfix 吗？
绝大多数情况不需要，但得看清楚你是否还在用 float 做整体布局：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
display: flex或display: grid→ 浮动在这些上下文中本就失效，.clearfix完全多余 - 需要兼容 IE8/9？仍需保留，但注意
display: table在这些版本中稳定；IE6/7 还得补*zoom: 1触发 hasLayout - CSS-in-JS 环境（如 styled-components）中，类名哈希化后
.clearfix可能不匹配，建议改用属性选择器（如[data-clear]）或组件内联样式 - 用了
contain: layout、transform或filter→ 这些会创建新的层叠上下文，可能隔离clear行为，此时堆.clearfix没用，得优先重构布局
调试时最常被忽略的点
别只盯着 CSS 文件有没有写对，得进 DevTools 看真实渲染状态：
- 打开 Elements 面板 → 找到目标父元素 → 查看 computed styles 里是否有
::after，且content值不是none - 确认
::after的display是table、clear是both - 检查父容器是否被其他样式（比如
position: absolute）拉出了文档流 —— 脱离文档流的容器，clear对它不起作用 - 真正容易翻车的，从来不是代码怎么写，而是你没意识到：父容器是否还在文档流里、有没有别的样式偷偷覆盖了
::after、以及——你是不是还在用 float 做整体布局
