clear:left仅清除左侧浮动，对右浮动无效；需用clear:right或clear:both应对右浮动；clear不解决父容器塌陷，应配合BFC触发；现代布局优先使用flex或grid替代float。
clear:left 根本不处理右浮动
clear:left 的作用范围非常明确：它只检查**前面所有 float:left 元素的下边界**，然后把当前元素的上边界下推到那个位置。对 float:right 元素完全无感知——哪怕右边堆着三个右浮动卡片，clear:left 也视而不见。
这不是 bug，是设计如此。CSS 规范里 clear 的每个取值都只响应对应方向的浮动，不存在“左清右”的连带效应。
- 如果你看到右浮动内容压住了某个元素，给它加
clear:left—— 没用，别试 - 想避开右浮动？必须用
clear:right，或者更彻底的clear:both - 混排场景（比如左图+右工具栏+中间正文）中，
clear:left和clear:right可能需要分别加在不同元素上
右浮动干扰时该加什么 clear 值
判断依据很简单：看你要躲开的是哪边的浮动。
- 只被右侧浮动顶上来？→ 加
clear:right到受影响的元素上 - 同时被左、右浮动卡住（比如两栏浮动后跟一个按钮）？→ 必须用
clear:both - 响应式中右浮动只在大屏出现，小屏取消？→ 把
clear:right放进对应媒体查询里，避免小屏误触发
注意：clear:right 同样只对块级元素生效；给 或 直接加无效，得先设 display: block 或换标签。
为什么 clear:both 有时也不起作用
常见假象：加了 clear:both，元素确实下移了，但父容器依然塌陷、背景色没包住内容——这不是 clear 失效，而是你搞错了目标。
-
clear只调整**自身位置**，不参与父容器高度计算 - 父容器塌陷的根本原因是浮动子项脱离文档流，
clear不修复这个，它只是让后续元素“绕开”而已 - 真正要撑高父容器，得靠 BFC 触发：比如父容器加
display: flow-root、overflow: hidden，或用伪元素::after清除
所以，clear:both + display: flow-root 经常是一起用的组合，前者管布局位置，后者管容器包裹。
现代替代方案比 clear 更可靠
纯靠 clear 应对浮动，本质是在补旧布局的漏洞。2026 年多数新项目已转向更可控的方式：
- 用
display: flex或display: grid替代 float 做多列/图文环绕，天然规避清除问题 - 若必须保留 float（如兼容老系统），优先用
display: flow-root作父容器，比各种clear+ 空 div 更干净 - RTL 场景下注意：
clear:right在 RTL 中实际表现可能和预期相反，建议用逻辑属性clear: inline-start/clear: inline-end替代方向关键词
浮动本身已是过时布局手段，clear 只是它的配套修补工具；真正容易被忽略的，是很多人还在用 clear 解决本不该由它解决的问题——比如父容器高度、响应式断点错位、或跨浏览器渲染差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
