clear:left仅避开前序float:left兄弟元素，无视右浮动；clear:right因dom与渲染顺序错位而极不稳定；clear:both可靠避开所有前序左右浮动，但不解决父容器塌陷。
clear:left 只检查前面的 float:left 兄弟元素
它根本不会看右浮动元素一眼。浏览器在计算 clear:left 时，只遍历 DOM 中位于当前元素之前的兄弟节点，逐个判断是否设置了 float: left；如果没找到，就直接忽略——哪怕右边飘着十个 float: right 的盒子，它也照常贴顶渲染。
常见错误现象：clear:left 加了但位置完全没变，大概率是因为前一个兄弟元素压根没设 float:left，或者浮动的是 right。
clear:right 在实际中极难可靠使用
clear:right 理论上只响应前面的 float:right 兄弟，但问题出在渲染顺序和 DOM 顺序不一致：右浮动元素视觉上“先占位”，DOM 却可能后出现；Firefox 常漏算，Chrome/Safari 表现也不统一。一旦混用 transform 或 position: absolute，清除逻辑直接失效。
典型翻车场景：
- 小屏断点中右栏取消浮动，
clear:right却还在，导致多出一段空白 - JS 动态插入右浮动元素，但
clear:right元素已在 DOM 中提前渲染完毕，无法感知
clear:both 是唯一能同时避开左右浮动的取值
clear:both 会同时等待所有前面的 float:left 和 float:right 兄弟结束，确保自身上边框落在它们共同底部之下。它不创建 BFC，也不撑高父容器，但定位行为最可预测。
关键限制：
- 只认“文档流中在它前面”的浮动元素，DOM 顺序错位就失效
- 父容器本身是浮动时，
clear:both失效（此时要清的是父级浮动） - 给浮动元素自己加
clear:both没意义——它已脱离文档流，clear 不起作用
现代布局中 float + clear 已基本被淘汰
只要父容器用了 display: flex 或 display: grid，子项的 float 和 clear 都会被浏览器忽略。真正解决父容器塌陷，应该用 display: flow-root、overflow: hidden 或伪元素 ::after 触发 BFC，而不是依赖 clear 避让。
容易被忽略的一点：很多人试图用 clear 修复父容器高度塌陷，但它只影响自身位置，对父容器毫无作用——这是最顽固的认知偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
