clear:left仅避开左侧浮动元素，无视右侧浮动；clear:right才处理右侧浮动但依赖dom顺序且兼容性差；clear:both是唯一能同时避开左右浮动的方案，但要求浮动元素必须在它之前；clear属性不解决父容器塌陷，需配合bfc触发方式。
clear:left 只检查左侧浮动兄弟元素
它不会感知右侧浮动元素的存在，更不会为它们留空。浏览器在计算 clear:left 时，只向前遍历 DOM 中已渲染的、float:left 的兄弟元素，找到它们最底端位置后，把当前元素上边界下移到该位置之下；对 float:right 兄弟完全跳过——哪怕右边飘着三个广告位，它也照常往上顶。
右浮动干扰仍会重叠或切割内容
常见现象是：加了 clear:left 后，文字块确实避开了左边导航栏，但右侧一个 float:right 的工具栏仍会侵入该文字块的行内空间，造成文字被截断、错行或背景遮盖。
- 这不是 bug，是规范行为：clear 方向性严格绑定浮动方向
-
clear:right才管右边，但它依赖 DOM 顺序，且在 Firefox/Chrome 表现不一致 - 若右侧浮动是通过 JS 动态插入，
clear:right往往直接失效（因为没“看到”前面有浮动）
想同时避开左右浮动，必须用 clear:both
clear:both 是唯一能同时等待所有前序 float:left 和 float:right 兄弟结束的方案。它不挑方向，也不依赖浮动类型是否“统一”，只要它们出现在当前元素之前，就会被纳入计算。
- 注意 DOM 顺序：浮动元素必须写在
clear:both元素之前，否则浏览器无从判断 - 别给浮动元素自己加
clear:both——它还在浮动流里，clear 对它无效 - 若父容器是
display:flex或display:grid，clear属性会被完全忽略（不是兼容问题，是规范废弃）
clear:left 不解决父容器塌陷，这点最容易被忽略
即使你给子元素加了 clear:left，父容器高度依然可能为 0。因为 clear 只调整自身位置，不参与父容器高度计算。要撑开父容器，得靠 display:flow-root、overflow:hidden 或伪元素 ::after 触发 BFC。
如果既要精准避让左侧浮动，又要父容器包裹全部内容，得组合使用：父容器设 display:flow-root + 子元素按需加 clear:left。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
