清除浮动的本质是修复父容器，而非处理浮动子元素；因浮动元素脱离文档流导致父容器高度塌陷，须通过触发BFC（如overflow:hidden）、伪元素clear:both或display:flow-root等方法使父容器重新包含浮动子项。
因为浮动元素脱离文档流，父容器根本“看不见”它们的高度，只有在父容器上做文章，才能让它重新包裹子元素、恢复正确高度。
父容器高度塌陷是真实渲染问题，不是视觉错觉
当子元素设置 float: left 或 float: right，它就从标准流中被移除。父容器计算自身高度时，直接跳过这些子元素——结果就是 offsetHeight 返回 0，背景色消失，边框压不住内容，后续兄弟元素上移覆盖。
这不是“看起来没清干净”，而是父容器在布局引擎里确实没有高度数据。任何对子元素或外部兄弟元素的操作（比如给最后一个 .item 加 clear: both）都改变不了这个事实。
-
clear: both的作用是“让当前元素的上外边距延伸到所有浮动元素下边缘之下”，它不修复父容器，只调整自己位置 - 伪元素
::after之所以有效，是因为它作为父容器的最后一个子节点，和浮动子元素同属一个 BFC，clear: both对它生效，从而把父容器的底部边界“拉下来” - 给浮动子元素自己加
clear: both完全无效——没有“自己避开自己”的逻辑
所有有效方案都必须作用于父容器本身
现代写法看似不同，但底层逻辑一致：全部通过改变父容器的渲染上下文来“强制感知”浮动子项。
立即学习“前端免费学习笔记（深入）”；
-
.parent::after { content: ""; display: table; clear: both; }：插入一个块级、不可见、带清除行为的末尾节点 -
.parent { overflow: hidden; }：触发 BFC，使父容器创建独立格式化上下文，自动包含浮动子项（但可能意外裁剪box-shadow或下拉菜单） -
.parent { display: flow-root; }：专为此场景设计的新值，语义清晰、无副作用，Chrome 64+ / Firefox 62+ / Safari 15.4+ 支持
注意：display: flex 或 display: grid 的父容器中，float 会被忽略——这不是清除问题，而是浮动在该上下文中本就不生效。
容易被忽略的关键细节
伪元素法失效，90% 是因为这几个小地方没写对：
-
::after必须有content属性，哪怕只是content: ""；缺了它，伪元素根本不生成 -
display值不能是inline，得是block、table或flex等能参与块级布局的值 - 如果用
display: block，建议加上height: 0; overflow: hidden;防止某些旧浏览器因最小高度机制撑开空白 - IE6/7 需要额外加
zoom: 1触发 hasLayout，否则伪元素不生效
真正要记住的只有一条：清除浮动不是处理浮动元素，而是修复它的父容器。写错位置，再漂亮的代码也白搭。
