clear:left仅避开前序左浮动元素的底部，不处理右浮动；clear:right因DOM与视觉顺序错位常失效；clear不消除浮动，仅调整自身位置；flex/grid中float和clear均无效。
clear:left 只看“前面”的左浮动，不处理右浮动
它不是清除自己左边的浮动元素，而是告诉浏览器：“我这个元素的上边框，不能出现在前面任何一个 float: left 元素的下方区域”。关键在“前面”——只检查 HTML 中位于它之前的兄弟元素，且那些兄弟必须是 float: left。如果前一个兄弟是 float: right 或者根本没浮动，clear: left 就完全不触发，也不会去管右边飘着几个 float: right 的盒子。
clear:right 为什么经常失效或表现不一致
clear: right 同样只找前面紧邻的 float: right 兄弟，但问题在于：右浮动元素在文档流中往往“后出现、先占位”，DOM 顺序和视觉顺序错位。Chrome 和 Safari 可能勉强算对位置，Firefox 则常把清除逻辑算漏；加上它不兼容 position: absolute 或 transform，一旦混用就直接跳过。
- 常见错误现象：
clear: right加了但元素没下移；小屏下右栏转为普通流，clear: both却多等一个已不存在的浮动，产生意外空白 - 调试建议：用开发者工具检查目标元素的上外边距（margin-top）是否被自动撑开；再往上逐个看兄弟元素的
float值和 DOM 位置 - 替代方案：现代布局中，用
text-align: right、margin-left: auto或flex的justify-content更可靠
clear 属性根本不清除浮动，只是调整自身位置
浮动元素依然存在，clear 不会让它们消失，也不改变父容器高度。它只是让当前块级元素的上边界避开前面指定方向的浮动块底部。所以：
- 写在浮动元素自己身上（如
.item { float: left; clear: both; }）毫无意义——它还在浮动流里，clear对它无效 - 写在父容器上（如
.container { clear: both; }）也无效——clear不是父容器的属性，不能控制子项浮动行为 - 如果浮动后面没有块级兄弟元素，
clear就无处安放；此时要解决父容器塌陷，得靠 BFC，比如display: flow-root或overflow: hidden
flex/grid 布局中 clear 完全失效
clear 是为传统文档流 + 浮动设计的，在 display: flex 或 display: grid 的父容器里，浮动本身就被忽略（除非显式设置且父容器未启用 flex/grid），clear 声明会被 CSS 引擎直接跳过。
容易被忽略的一点是：即使你写了 float: left，只要父容器是 flex，子项就自动变成 flex item，float 和 clear 都不参与布局计算。这时候调样式，得去看 order、align-self 或 flex-wrap，而不是折腾 clear。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
