先给出一个关键结论：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一劳永逸——它只是布局微调工具，并非浮动问题的终极解决方案
