clear:left 的作用是让当前元素上边界下移至所有左浮动元素下边界之下，仅影响自身位置计算，不改变浮动元素或撑开父容器。
clear:left 不是用来“修复浮动”的，而是让当前元素避开左侧浮动元素的顶部区域；它只移动自己，不改变浮动元素、也不撑开父容器。
clear:left 的真实作用范围
它不是“把左边的浮动清掉”，而是告诉浏览器：“我的上边界，必须下移到所有 float:left 元素的下边界之下”。这个动作只影响当前元素的位置计算，和浮动元素本身无关。
- 如果前面有多个
float:left元素，clear:left会让当前元素下移，直到它顶部不再和其中任何一个重叠 - 对
float:right元素完全无感知——哪怕右边也堆着浮动块，它照样无视 - 若父容器已触发 BFC（如设置了
display:flow-root或overflow:hidden），内部浮动已被包裹，此时加clear:left往往没视觉变化
什么时候必须用 clear:left 而不是 clear:both
典型场景是“局部避让”：你只担心被左边浮动干扰，但右侧仍需保持自由布局流。
- 图文环绕中，正文绕左图，中间插入一个操作按钮，希望它不被左图挤偏，但又不想强行独占整行（
clear:both会破坏右侧排版）→ 给按钮加clear:left - 响应式断点下，小屏时左侧导航栏浮动，右侧内容需下移避开，但大屏已取消浮动 → 只在小屏媒体查询里加
clear:left，更轻量 - RTL 布局中，
clear:right更自然；但若混用 LTR 内容与右浮动工具栏，clear:left反而可能误伤右侧对齐
常见错误写法与兼容陷阱
很多人加了 clear:left 却没效果，问题往往不在属性本身，而在上下文。
- 对
span、a这类默认display:inline的元素直接设clear:left—— 无效。必须先设display:block或改用div等块级标签 - 把
clear:left加在浮动元素自己身上（如.logo { float:left; clear:left; }）—— 没意义，浮动元素不响应clear - 在 IE6/7 中，若父容器没触发 layout（如缺
zoom:1或height），clear:left可能计算错位；安全起见，搭配.clearfix类或直接用现代 BFC 方案
clear:left 无法解决父容器塌陷
这是最容易混淆的一点：哪怕你给子元素加了 clear:left，只要父容器没触发 BFC，高度依然塌陷。因为 clear 只调整自身位置，不参与父容器高度计算。
- 想让父容器包裹住所有浮动子项？得靠
display:flow-root、overflow:hidden或伪元素::after清除 - 若既要精准避让左侧浮动，又要父容器撑高，得组合使用：父容器设
display:flow-root，子元素按需加clear:left - 别指望
clear:left一劳永逸——它只是布局微调工具，不是浮动问题的终极解法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
