清除浮动必须作用于父元素，因为clear属性仅对同属一个bfc的紧邻浮动兄弟元素生效，无法跨层级影响子元素；浮动子元素脱离文档流导致父元素高度塌陷，故需在父元素内（如::after伪元素）触发清除以恢复正常布局。
清除浮动为什么必须作用于父元素
因为 clear 属性只对「紧邻的、处于同一块级格式化上下文（BFC）中的浮动兄弟元素」生效，它无法跨层级影响子元素的浮动行为。父元素不参与清除，子元素的浮动就会“逃逸”出父容器，导致父元素高度塌陷。
浮动脱离文档流后，父元素完全感知不到它
当子元素设置 float: left 或 float: right，它会从常规文档流中移除，父元素计算高度时直接忽略这些浮动子项。此时父元素的 height 可能变成 0，背景、边框、后续兄弟元素都会错位。
常见错误现象：
- 父
<div> 没有背景色或边框——其实它根本没撑开<li>父元素后面的元素向上“顶”进来了，像是浮动元素没被包裹</li> <li> <code>console.log(parent.offsetHeight)返回0或远小于预期
clear 本身不清理浮动，只是避开浮动区域
clear 的真实作用是：让当前元素的上外边距（margin-top）延伸到指定方向所有浮动元素的下边缘之下。它不是“收回”浮动元素，而是“等它们让出空间”。所以必须把这个“等待动作”放在浮动元素的同级或后续兄弟元素上——而最稳定、最可控的位置，就是父元素内部的末尾（如伪元素 ::after），或父元素自身（如果它也参与布局流）。
立即学习“前端免费学习笔记（深入）”；
典型安全写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.parent {
zoom: 1; /* IE6/7 兼容 */
}关键点：
-
::after生成的内容是父元素的最后一个子节点，和浮动子元素同属父元素的子级，因此clear: both对它有效 - 不能写在浮动子元素自己身上——
clear对自己无效（没有“自己避开自己”的逻辑） - 不能写在父元素外部的兄弟元素上——它只能影响自己与前面浮动元素的关系，无法修复父元素已发生的塌陷
现代替代方案仍需父元素介入
虽然 display: flow-root 或 overflow: hidden 能让父元素创建 BFC 并自动包含浮动子项，但本质仍是通过改变父元素的渲染上下文来实现。这进一步印证：浮动的影响范围止步于父容器边界，修复动作必须落在父元素这一层。
容易被忽略的细节：
-
display: flex或display: grid的父元素，子元素设float会被忽略——这不是清除问题，而是浮动在 Flex/Grid 容器中本就不生效 -
position: absolute子元素也会脱离文档流，但clear对它完全无效，因为它已不在浮动影响范围内 - 用
clear: both的元素若本身display: none或visibility: hidden，清除失效——它必须参与盒模型计算
