clear:left只避开左侧浮动元素，clear:right只避开右侧浮动元素，clear:both同时避开左右两侧浮动元素；三者均仅对块级元素生效，且只作用于自身、影响其位置而非清除浮动本身。
clear:left 只管前面的 float:left 兄弟
它不会检查右侧有没有浮动，也不会影响右侧浮动元素的位置。只要 HTML 中当前元素前面有 float: left 的兄弟，它就会下移，直到上边框不与这些左浮动块的底部对齐。
常见错误现象：clear: left 加了但没效果，大概率是前一个兄弟根本没设 float: left，或者浮动的是 float: right；也可能是该元素本身是行内元素——clear 只对块级元素生效。
- 适用场景：左侧固定导航栏（
float: left），正文需从它下方开始，且右侧内容确定无浮动或已用position: absolute脱离文档流 - 注意：
clear: left不阻止右侧浮动“侵入”自身行内空间，文字仍可能被右浮动元素切割或覆盖 - IE6/7 对它的解析有细微偏差，若需兼容，务必实机测试
clear:right 在 DOM 顺序和渲染顺序错位时极不可靠
clear: right 看的是前面的 float: right 兄弟，但右浮动元素在视觉上常“先占位、后出现”，导致浏览器在计算清除位置时找不到稳定锚点。Firefox 常漏算，Chrome/Safari 表现也不一致。
常见错误现象：加了 clear: right 却没下移；小屏断点中右栏转为普通流，该声明反而多等一个已不存在的浮动，造成意外空白；配合 transform 或 position: absolute 后清除逻辑直接失效。
立即学习“前端免费学习笔记（深入）”；
- 仅建议在 RTL 布局或固定宽度 + 固定 DOM 顺序的右工具栏中谨慎使用
- 不要用于响应式布局，尤其当右浮动内容可能被 JS 动态插入或媒体查询切换时
- 现代替代方案优先用
text-align: right、margin-left: auto或 flex 的justify-content，绕开clear本身
clear:both 是唯一真正可靠的“全躲开”方案
clear: both 会同时等待所有前面的 float: left 和 float: right 兄弟结束，确保自己上边框落在它们共同的底部之下。它不创建 BFC，也不撑高父容器，但定位行为最可预测。
关键限制：若浮动块在 HTML 中写在后面（比如 JS 动态插入），clear: both 元素会卡在错误位置，因为它只认“前面”的浮动；若父容器本身是浮动的，clear: both 失效——此时要清的是父容器的浮动，不是子元素。
- 典型使用场景：文章正文区、表单提交按钮、卡片列表后的清除行（
<div style="clear:both"></div>） -
clear属性在flex/grid中完全不生效——只要父容器设置了display: flex或display: grid，子项的float和clear都会被浏览器忽略 -
clear不解决父容器塌陷问题；想撑高父容器，得用overflow: hidden、display: flow-root或 BFC 方案
为什么 clear:right 很少单独出现
多数布局以左对齐为主流（文字流、导航、卡片列表），右侧浮动多为装饰性组件（如侧边工具栏、返回顶部按钮）。一旦右侧有浮动，更倾向用 clear: both 或直接用 overflow: hidden/display: flow-root 触发 BFC 来整体包裹。
容易踩的坑：clear: right 在 RTL 页面中行为不变——它始终指 CSS 盒模型中的右侧，不是“文本方向上的右侧”。RTL 页面中仍需按盒模型理解：它清除的是 float 向盒模型右侧的浮动，不是“最后那个字符的右边”。
-
clear只影响自身，不会改变其他元素；它不是“清除浮动”，而是“抗浮动”——让当前元素避开指定方向浮动块的底部 -
clear不能写作clear: left right（无效），CSS 不支持多值组合写法 - 现代布局中，
float已基本被flex和grid取代；clear主要用于维护旧项目或特定图文环绕场景
