::after能清除浮动是因为它在父容器内部末尾插入虚拟子元素并设clear: both来撑开高度，而clear: both仅对后续块级兄弟元素生效，无法作用于已塌陷的父容器；必须设content: ""和display: block/table，现代推荐display: flow-root或flex/grid布局替代。
为什么 ::after 能清除浮动，而不是直接用 clear: both
因为 clear: both 只对「后续的块级兄弟元素」生效，而浮动脱离文档流后，父容器高度塌陷，兄弟元素根本“够不着”那个塌陷的父容器底部——::after 是在父容器内部末尾插入一个虚拟子元素，再给它设 clear: both，强制它下移，从而撑开父容器。
常见错误现象：div 里几个 float: left 的子项，父 div 在开发者工具里显示高度为 0px，背景色/边框全消失。
- 必须同时设置
content: ""，否则伪元素不渲染（哪怕内容为空） - 必须设
display: table或block，默认是inline，无法触发clear - 不能只靠
visibility: hidden或height: 0隐藏，得用font-size: 0或line-height: 0避免 IE6/7 下撑出空白行
_clearfix 类里为什么要写两套 ::after 规则
早期为了兼容 IE6–7，需要额外用 :before 解决「外边距合并」问题（即父容器上边距被第一个子元素吃掉），而 ::after 专管清除浮动；现代写法其实只需要 ::after，但很多项目保留双伪元素是怕老项目里有依赖 :before 的 hack 行为。
使用场景：你维护一个还在支持 IE8 的后台系统，或者复用某个老 CSS 框架的 reset 样式。
立即学习“前端免费学习笔记（深入）”；
-
:before主要解决顶部 margin 折叠，不是为清浮动；漏掉它，某些布局顶部会少 10px -
::after必须声明clear: both，且不能和:before共享样式块（IE7 不识别::双冒号语法） - 现代项目可简化为仅
::after+display: table，更轻量、无兼容副作用
display: table 和 display: block 在 ::after 里有啥区别
display: table 是历史遗留选择：它天然生成 BFC，能隔离浮动影响，且不会像 block 那样受外边距合并干扰；但它的副作用是可能意外触发表格相关渲染逻辑（比如在 flex 容器里表现异常）。
性能影响几乎可忽略，但兼容性上：table 在 IE8+ 安全，block 在所有浏览器都稳。
- 如果父容器是
display: flex或grid，用block更稳妥，table可能被忽略或错位 - 若需严格兼容 IE6–7，必须用
block+zoom: 1（触发 hasLayout） -
display: flex或grid本身就能包含浮动，此时根本不需要_clearfix
现在还该手动写 _clearfix 吗
大多数情况不该。Flex 和 Grid 布局已成事实标准，它们天然不产生浮动塌陷；就算要用浮动，也往往是局部微调（比如文字环绕），不会让整个模块依赖浮动流。
容易被忽略的地方：很多人把 _clearfix 当成“通用防塌陷神器”，硬塞进每个容器，结果在 flex 容器里多出一个不可见的伪元素，既无用又增加渲染节点。
- 检查父容器是否已是
display: flex/grid/flow-root，若是，删掉_clearfix -
display: flow-root是最干净的替代方案（Chrome 58+，Firefox 59+），一行解决，无需伪元素 - 如果必须支持 IE11 及以下，且不用 flex，那
_clearfix还是目前最可控的选择
