CSS 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 一劳永逸——它只是布局微调工具，并非浮动问题的终极解决方案