clear 只影响自身位置，强制上边界下移避开前面浮动元素；clear: both 避开左右所有浮动，clear: left 仅避开左侧浮动，且仅当前面紧邻有左浮动时生效。
clear: both 会避开所有方向的浮动，而 clear: left 只避开左侧浮动
关键区别不在“清除谁”，而在“避开哪边”。clear: both 表示该元素的上边界不能和**前面任意 float: left 或 float: right 元素**的底外边距对齐；clear: left 则只检查前面是否有 float: left 元素，有就下移，完全无视右侧有没有 float: right。
常见错误现象：在图文混排中，左侧有浮动图片、右侧有悬浮按钮，给正文加了 clear: left，结果文字仍被右侧按钮遮挡或挤到奇怪位置。
使用前提：
-
clear: left有效仅当它前面紧邻（文档流顺序）存在float: left元素 -
clear: both在左右都有浮动、或不确定浮动方向时更稳妥 - 两者都只对块级元素生效；行内元素设了也无效
clear 只作用于前面的浮动元素，不处理后面的
这是最容易误解的一点：clear 不是“清掉浮动本身”，也不是“让父容器包住子元素”，它只影响**自己**的位置——强制自己的上边框下移到前面浮动元素的底部之下。
立即学习“前端免费学习笔记（深入）”；
典型误用：
- 把
clear: both加在浮动元素**内部**（比如浮动div里最后一个子元素），毫无效果 - 把
clear: left放在float: right元素后面，因为前面没左浮动，所以不触发下移 - 期望
clear: left让右侧浮动“消失”或“重排”，它做不到
clear: left 在现代布局中容易被高估
很多开发者看到“左侧有浮动”，下意识写 clear: left，但实际场景往往更复杂：
- 响应式断点切换后，原本右浮动的工具栏可能变成左浮动，
clear: left就突然失效 - RTL 页面中
clear: right的行为不变，但开发者常误以为它会随文本方向翻转 - 若父容器已用
display: flow-root或overflow: hidden触发 BFC，根本不需要clear
性能上虽无直接损耗，但过度依赖 clear 会增加重排次数，尤其在动态插入大量浮动内容时。
别忘了 clear 是“抗浮动”，不是“清浮动”
clear 的本质是让当前元素“抗住”浮动干扰，而不是修复浮动带来的父容器塌陷。真正解决塌陷，应该优先考虑：
- 父容器用
display: flow-root（推荐，语义清晰、无副作用） - 父容器用
overflow: hidden（兼容性好，但可能意外裁剪内容） - 仅当必须用
clear时，明确它只管自己位置，不管别人高度
最常被忽略的是：哪怕页面里没有任何浮动，clear: both 也会强制换行，多出一段空白间距——这不是 bug，是规范行为。
