clearfix 必须用 ::after 而非 ::before，因 ::before 插入内容在流首无法撑开父容器，而 ::after 在末尾插入伪元素，配合 display: table 触发 BFC 并使 clear: both 生效于浮动流末端。
为什么 clearfix 必须用 ::after 而不是 ::before
因为 ::before 插入的内容在元素内容流最前面，无法撑开父容器底部；而 ::after 在末尾插入伪元素，配合 display: table 会触发 BFC，并让 clear: both 真正生效——它清的是子元素浮动后留下的“空洞”，这个动作必须发生在所有浮动子元素之后。
常见错误现象：::before 加了 clear: both 完全没用，父容器高度还是塌陷。
-
::after是唯一能确保清除发生在浮动流末端的方式 -
display: table比display: block更稳妥：它隐式创建 BFC，且不会意外继承外边距合并行为 - 不用
display: inline-block或float，否则可能干扰布局上下文
clearfix 的最小可用写法长什么样
最简可用版本只做三件事：生成伪元素、设为表格显示模式、清除两侧浮动。不加 visibility: hidden 或 font-size: 0 也能工作，但可能在旧版 IE 中有空白行问题。
/* 最小可用 */
.clearfix::after {
content: "";
display: table;
clear: both;
}使用场景：给一个包含多个 float: left 子项的容器加类，比如导航栏、卡片列表、侧边栏布局。
立即学习“前端免费学习笔记（深入）”；
- 必须给父容器加
class="clearfix"，不能只靠 CSS 自动识别浮动子元素 -
content: ""不能为空字符串以外的值（如content: " "会多一个空格字符，可能引发换行） - 不要漏写
content—— 没有内容的伪元素在部分浏览器中不会渲染，clear就失效
IE6/7 下 zoom: 1 还有必要吗
有必要，但仅限于需要支持 IE6–7 的老项目。这些版本不支持 ::after 伪元素，zoom: 1 是触发 hasLayout 的兼容写法，能让父容器“感知”到浮动子元素的高度。
错误做法：只加 zoom: 1 不加 ::after 清除 → 现代浏览器里无效；只加 ::after 不加 zoom: 1 → IE6/7 塌陷。
- 现代项目（IE8+）可完全省略
zoom: 1 - 若保留兼容写法，
zoom: 1应放在::after规则外部，作为同一选择器的普通声明 -
*zoom: 1（带星号前缀）是 hack 写法，仅 IE6–7 解析，不影响其他浏览器
比起 overflow: hidden，clearfix 有什么不可替代性
overflow: hidden 确实也能闭合浮动，但它会裁剪溢出内容、隐藏阴影、影响 position: fixed 子元素定位，还可能触发不必要的重绘。而 clearfix 是纯布局修复，不改变视觉边界或层叠上下文。
典型踩坑：给弹出菜单的父容器设 overflow: hidden，结果下拉项被截断；或者加了 box-shadow 却看不到边缘。
-
clearfix是语义明确的“清浮动”意图，维护时更容易理解动机 - 当容器本身就需要
overflow: visible（比如含 tooltip、dropdown、动画移出区域）时，clearfix是唯一安全选项 - 某些 CSS-in-JS 方案或 Shadow DOM 环境中，
overflow行为更难预测，clearfix更稳定
真正容易被忽略的是：清除浮动不是“让父容器变高”，而是“让父容器正确参与文档流高度计算”。一旦忘了这点，就容易在嵌套浮动、flex 与 float 混用、transform 影响 BFC 的场景里反复掉坑。
