clear: both 会同时清除左右两侧浮动，强制元素下移至左右均无浮动干扰的位置，常用于解决浮动导致的布局断层；clear: left/right 仅分别清除单侧浮动，且只作用于前面的兄弟浮动元素。
clear: both 会同时清除左右两侧浮动
当一个元素设置了 clear: both，它会强制自己**不与前面任何浮动元素（无论是 float: left 还是 float: right）的外边缘对齐**，也就是向下移动，直到左右两边都“腾出空地”为止。这常用于清空浮动后的布局断层，比如在浮动导航栏下方放一个页脚时，防止页脚被浮动内容顶上去。
常见错误现象：只用 clear: left 却发现右侧还有浮动元素“卡住”了该元素，导致位置异常。
- 适用场景：父容器没有高度塌陷、需要彻底结束浮动流影响的块级元素（如
<div class="clearfix">） <li>性能影响：无直接性能损耗，但过度使用可能增加重排次数（尤其在动态插入大量浮动元素时）</li> <li>兼容性：所有浏览器支持，包括 IE6+</li> <h3>clear: left 只避开左侧浮动元素</h3> <p><code>clear: left的作用很具体：它只检查**紧邻的前一个或多个兄弟元素中是否有float: left的元素**，如果存在，就把自己往下推，直到不再和它们的右边缘（即浮动区域底部）重叠；但它完全不管右侧有没有float: right元素——那些仍可能“侵入”它的上边距或行框空间。典型误用：想让一个文字块避开左侧广告图+右侧悬浮按钮，却只设
clear: left，结果文字被右侧按钮遮挡或错位。立即学习“前端免费学习笔记（深入）”；
- 使用前提：明确只需要隔离左浮动，且右侧无浮动干扰，或右侧浮动已通过其他方式控制（如绝对定位）
- 参数差异：不能写作
clear: left right（无效），CSS 不支持多值组合写法 - 注意：
clear只对**块级元素**生效；行内元素即使设了也无效
为什么 clear: right 很少单独出现
从清除方向角度看，
clear: right和clear: left是镜像关系，但实际项目中极少单独依赖它，因为多数布局以左对齐为主流（文字流、导航、卡片列表等），右侧浮动多为装饰性或局部组件（如侧边工具栏、返回顶部按钮）。一旦右侧有浮动，往往更倾向用clear: both或直接用overflow: hidden/display: flow-root触发 BFC 来整体包裹。容易踩的坑：
clear: right在 RTL（右向文本）页面中行为不变——它始终指 CSS 布局盒模型中的右侧，不是“文本方向上的右侧”。- RTL 页面中仍需按盒模型理解：
clear: right清除的是 float 向盒模型右侧的浮动，不是“最后那个字符的右边” - 若混用 LTR 内容 + RTL 容器，
clear行为取决于该元素自身的 writing-mode 和 direction，不是父级
现代替代方案比 clear 更可控
单纯靠
clear解决浮动问题，本质上是在“打补丁”。它只解决视觉位置，不改变文档流结构，也无法应对 flex / grid 布局下的嵌套浮动（虽然现在基本不用了）。真正需要控制清除方向的复杂场景，往往说明布局本身已偏离语义化设计原则。例如，用
display: flex替代浮动导航后，根本不需要clear；用display: grid排版两栏内容，浮动和清除都成了冗余操作。- 如果必须保留浮动（如兼容老项目），优先用
clear: both+ 伪元素::after实现 clearfix - 不要试图用
clear: left和clear: right精确微调多列浮动间距——那通常意味着该用gap或margin了 - 最易被忽略的一点：
clear只检查**前面的兄弟元素**，对父级或后面的浮动完全无感知
