clear:left和clear:right仅避开前序同向浮动元素底部，互不干涉；clear:both可靠地避开所有前序浮动；flex/grid中float和clear均无效；clear不解决父容器塌陷。
clear:left 和 clear:right 都只管“前面”的同向浮动，且互不干涉；它们不是清除浮动本身，而是让当前元素避开前面某个方向的浮动块底部。
clear:left 只响应前面的 float:left 兄弟
它会检查 HTML 中位于自己之前的兄弟元素，只要其中存在 float: left，就把自己下推，直到上边框不再与这些左浮动元素的底部对齐。但对 float: right 完全无视——哪怕右边飘着三个右浮动盒子，它也照常往上顶。
- 常见错误现象：
clear: left加了但位置没变，大概率是前一个兄弟根本没设float: left，或者浮动的是right - 适用场景：左侧有固定导航栏（
float: left），正文需从它下方开始，且右侧内容确定无浮动或已用position: absolute脱离文档流 - 注意：
clear: left不阻止右侧浮动“侵入”自身行内空间，文字仍可能被右浮动元素切割或覆盖
clear:right 依赖 DOM 顺序，实际表现极不稳定
clear: right 同样只看前面的 float: right 兄弟，但问题在于右浮动元素在视觉上“先占位、后出现”，DOM 顺序和渲染顺序错位。Firefox 常漏算，Chrome/Safari 表现也不一致；一旦混用 transform 或 position: absolute，清除逻辑直接失效。
- 常见错误现象：加了
clear: right却没下移；小屏断点中右栏转为普通流，该声明反而多等一个已不存在的浮动，造成意外空白 - 仅建议在 RTL 布局或固定宽度 + 固定 DOM 顺序的右工具栏中谨慎使用
- 现代替代方案优先用
text-align: right、margin-left: auto或 flex 的justify-content，绕开clear本身
clear:both 是唯一真正可靠的“全躲开”方案
clear: both 会同时等待所有前面的 float: left 和 float: right 兄弟结束，确保自己上边框落在它们共同的底部之下。它不创建 BFC，也不撑高父容器，但定位行为最可预测。
立即学习“前端免费学习笔记（深入）”；
- 典型误用：给浮动元素自己加
clear: both—— 没意义，它还在浮动流里，clear对它无效 - 关键限制：若浮动块在 HTML 中写在后面（比如 JS 动态插入），
clear: both元素会卡在错误位置，因为它只认“前面”的浮动 - 父容器本身是浮动时，
clear: both失效——此时要清的是父容器的浮动，不是子元素
clear 属性在 flex/grid 中完全不生效
只要父容器设置了 display: flex 或 display: grid，子项的 float 和 clear 都会被浏览器忽略。这不是兼容性问题，而是规范层面的废弃：浮动模型与弹性/网格布局互斥。
- 容易被忽略的一点：即使你写了
float: left，只要父容器是 flex，子项就自动变成 flex item，clear声明直接被跳过 - 调试时若发现
clear没反应，先检查父容器的display值，而不是反复调clear参数 - flex/grid 下控制排列，得看
order、align-self、justify-content等，不是clear
真正容易被忽略的是：clear 从不解决父容器塌陷。无论 left、right 还是 both，都只调整自身位置，不参与父容器高度计算。要撑高父容器，必须触发 BFC —— 用 overflow: hidden、display: flow-root 或伪元素 ::after { clear: both } 才行。
