清除浮动的代码必须写在浮动元素的父容器上，因为浮动元素脱离文档流导致父容器高度坍缩为0，只有作用于父容器才能使其重新包裹子元素并正确计算高度。
清除浮动的代码必须写在浮动元素的父容器上，不能写在浮动子元素自身、兄弟元素或祖父容器上。 这不是风格偏好，而是由浮动脱离文档流的机制决定的——只有父容器“感知”到内部浮动的存在，才能正确计算高度、避免塌陷。
为什么必须写在父容器上
浮动元素会完全脱离标准流，导致父容器无法检测其尺寸，高度坍缩为 0。此时任何对子元素或兄弟元素的操作（比如给 .item 加 clear: both）都改变不了父容器的塌陷状态。常见错误现象包括：父容器背景色/边框消失、后续内容上移覆盖浮动区域、margin-bottom 失效等。
关键点：
- 父容器塌陷是视觉和布局层面的真实问题，不是“看起来没清干净”
- 清除动作的目标不是“让浮动元素停下”，而是“让父容器重新包裹住它们”
- 所有有效方案（
::after、overflow、display: flow-root）都作用于父容器，这是底层渲染规则决定的
.clearfix::after 的现代写法及兼容细节
推荐使用伪元素方案，语义干净、无额外 DOM、兼容性好。但要注意两个易错点：
立即学习“前端免费学习笔记（深入）”；
- 必须用
display: table或display: block，不能用display: inline（否则clear不生效） - IE8+ 可省略
zoom: 1，但若项目仍需支持 IE7，需补上：.clearfix { zoom: 1; } - 现代项目可直接用
display: flow-root替代，一行解决：.container { display: flow-root; }
简洁可靠的写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
哪些位置绝对不要写
以下写法看似能“清掉浮动”，实则掩盖问题或引入新 bug：
- 写在浮动子元素上，例如
.item { clear: both; }：对父容器高度毫无影响，只是让该元素自己换行 - 写在兄弟元素上，例如
.next-section { clear: both; }：只阻止它被浮动覆盖，父容器依然塌陷 - 写在祖父容器上，例如给
.page加 clearfix：可能误清其他无关浮动块，逻辑错位且难以维护 - 用
<div style="clear:both"></div>插入父容器末尾：破坏 HTML 语义，增加无意义节点，响应式场景下易出错
新项目优先考虑替代方案
真正需要清除浮动，往往说明还在用 float 做整体布局。而现代 CSS 中，float 应仅用于图文环绕等局部场景。复杂布局请直接用：
-
display: flex：父容器设为 flex 后，子元素自动参与弹性布局，天然规避塌陷 -
display: grid：同理，grid 容器不依赖 float，也不需要 clear -
display: flow-root：最轻量的“BFC 触发器”，比overflow: hidden更安全（不隐藏溢出内容）
如果某段代码里还大量出现 float: left 配合 clearfix，大概率该重构为 Flex 或 Grid —— 不是清除没写对，而是布局模型本身已过时。
