clear:left仅避开前一个同级float:left兄弟元素，对float:right完全无效；clear:right因dom与渲染顺序错位而不可靠；clear:both是唯一可预测的通用解，但不解决父容器塌陷。
clear:left 只躲左边浮动，不管右边飘着什么
给元素加 clear:left，浏览器只检查它前面的兄弟元素里有没有 float:left，有就下推，直到上边框落到这些左浮动块的底部之下；但对 float:right 完全无视——哪怕右边飘着三个广告位，它照样往上顶、文字被切、布局错位。
- 常见错误现象：
clear:left加了但位置没变？大概率前一个兄弟根本没设float:left，或者浮动的是right - 适用场景：左侧固定导航栏（
float:left），正文需从它下方开始，且右侧内容确定无浮动（比如纯文本流或已用position:absolute脱离文档流） - 注意：
clear:left不阻止右侧浮动“侵入”自身行内空间，文字仍可能被右浮动元素切割或覆盖
clear:right 在真实项目里极难靠得住
clear:right 看的是前面的 float:right 兄弟，但问题在于 DOM 顺序和渲染顺序错位：右浮动元素常“后写、先占位”，导致 clear:right 找不到锚点。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失效——此时要清的是父容器的浮动，不是子元素
flex/grid 容器里 clear 属性直接被忽略
只要父容器设置了 display:flex 或 display:grid，子项的 float 和 clear 都会被浏览器忽略。这不是兼容性问题，而是规范层面的废弃：浮动模型与弹性/网格布局互斥。
- 容易踩的坑：把一个
clear:left元素放在display:flex的父容器里，发现完全不生效——不是写错了，是 CSS 引擎直接跳过该声明 - 这时候该用
margin-top、align-self或gap等现代布局手段替代 - 开发者工具里看到
clear被划掉？先确认父容器是否flex/grid
left 还是 right，而是你还在用浮动布局——而父容器塌陷、响应式错位、DOM 顺序依赖这些问题，早该由 display:flow-root 或 flex 替代掉了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
