clearfix能撑开父容器高度是因为浮动元素脱离文档流导致父容器塌陷，而.clearfix::after通过插入块级伪元素并设置clear: both和display: table来触发BFC、拉低父容器底边，从而修复包含逻辑。
clearfix 为什么能撑开父容器高度
因为浮动元素脱离文档流，父容器计算高度时直接忽略它们，导致“塌陷”。.clearfix::after 在父容器内容末尾插入一个块级伪元素，这个元素本身不占视觉空间，但 clear: both 强制它必须“下移”到所有浮动元素下方——这一下移动作把父容器的底边也拉了下来。
display: table 是关键，不是可有可无
如果只写 content: "" + display: block + clear: both，在某些旧版浏览器（如 IE8）或特定排版组合下仍可能塌陷。而 display: table 有两个实际作用：自动触发 BFC，确保父容器重新包含内部浮动；避免基线对齐带来的额外高度（display: block 在某些场景会因 inline-level 上下文产生不可控间隙）。
zoom: 1 和 *+height: 1% 是给谁用的
这些是为 IE6/7 设计的兼容补丁，现代项目基本可以删掉：
-
zoom: 1触发 hasLayout，让 IE6/7 父容器“意识到”浮动子项存在 -
*+height: 1%是 hack 写法，仅 IE7 解析，起类似作用 - 2026 年绝大多数项目已放弃 IE6–8 支持，保留它们只会增加维护噪音
为什么不能直接给父元素加 clear: both
clear 属性只对「自身所在的块级盒」生效，且只影响它前面的浮动兄弟元素。父容器和浮动子元素是祖先/后代关系，不是兄弟关系——所以 clear: both 写在父元素上，浏览器会直接忽略。真正起效的位置，必须是「浮动元素之后、父容器之内」的一个块级节点，::after 就是这个节点的干净实现方式。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：clearfix 不是在“清除浮动”，而是在“修复父容器的包含逻辑”。只要还在用float 布局，这个绕不开；一旦全面迁移到 flex 或 grid，父容器天然形成 BFC，clearfix 就只是历史遗留代码了。 
