::after清除浮动必须同时满足content: ""、display: table、clear: both三条件，缺一导致父容器高度塌陷；需加在浮动子项的直接父容器上，现代布局优先用display: flow-root替代。
::after 清除浮动有效，但必须同时满足三个硬性条件：content 非空、display 为 table 或 block、clear: both；漏掉任意一个，父容器高度照样塌陷。
为什么 .clearfix::after 加了却没用
常见现象是父容器 offsetHeight 仍为 0，背景色和边框全消失。这不是浏览器不支持，而是以下任一条件未满足：
-
content: ""被省略、写成content: none，或只留空格（如content: " "）→ 伪元素根本不渲染 -
display没设，或设成inline/inline-block→ 伪元素无法触发清除行为 - 父容器自身有
overflow: hidden、auto或scroll→ 这些属性会压制clear: both的布局效果
.clearfix::after 的标准写法及 display 选 table 还是 block
推荐直接复用这一写法，它在 IE8+ 到现代浏览器中都稳定生效：
.clearfix::after {
content: "";
display: table;
clear: both;
}
display: table 比 display: block 更可靠，原因包括：
- 天然触发 BFC，避免 margin collapse 导致伪元素“看不见”
- 在 IE8/9 下更稳定，不会因 line-height 或 font-size 产生意外间隙
- 不需要额外加
height: 0或visibility: hidden来隐藏
若用 display: block，需补 height: 0; visibility: hidden;，否则某些安卓 WebView 可能渲染出 1px 空隙。
clearfix 必须加在哪一层父容器上
必须加在「直接包裹浮动子项」的父元素上，多一层或少一层都不行。例如：
- HTML 是
<div class="outer"><div class="inner"><div style="float:left"></div></div></div>→.clearfix要加在.inner上，不是.outer - Vue/React 中，不要加在组件根节点（如
<div class="my-component">），而应加在模板里那个明确包裹 <code>v-for浮动项的<div> <li>嵌套浮动结构（如外层列表 + 内层图文浮动）→ 每一级「包含浮动子项」的容器都得单独加 <code>.clearfix - 父容器用了
display: flex或display: grid→ 子元素即使写了float: left也基本失效，.clearfix不仅无效，还可能干扰align-items或引发嵌套滚动 - 需要兼容 IE11 或旧 Safari → 仍得回退到
.clearfix，记得补*zoom: 1兜底 IE6–7 - 新项目优先用
display: flow-root：.container { display: flow-root; }—— 它原生创建 BFC，零副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持
现代项目里还该手动写 clearfix 吗
取决于你是否还在用 float 布局：
真正容易被忽略的是：加完 .clearfix 后，浮动本身依然存在。它会影响相邻块级元素的 margin 折叠、z-index 层级计算，甚至让 getBoundingClientRect() 返回异常值。修高度只是第一步，得顺手检查周围元素是否表现如预期。
