CSS clear both 和 clear left 区别是什么？

本文共计1271个文字，预计阅读时间需要6分钟。

当元素设置了`clear: both`，它会强制自己与前面任意浮动物素的边框对齐。也就是说，无论前面的浮动物素是左浮动还是右浮动，`clear: both`都会将元素推出浮动流，直到左右两边都腾出空间为止。这同样也意味着元素会向下移动，直到左边界和右边界都被腾出空间。

这通常用于清理浮动后的布局断层，例如在浮动导航栏下方放置一个页脚时。例如，在浮动导航栏下方放置一个页脚时，使用`clear: both`可以防止页脚被浮动导航栏内容推上去。

总结来说，使用`clear: both`能够确保元素不会浮在前面任意浮动元素的上方，直到该元素左右两边都腾出空间为止。

常见错误现象：只用 clear: left 却发现右侧还有浮动元素“卡住”了该元素，导致位置异常。

• 适用场景：父容器没有高度塌陷、需要彻底结束浮动流影响的块级元素（如 <div class="clearfix">）
• 性能影响：无直接性能损耗，但过度使用可能增加重排次数（尤其在动态插入大量浮动元素时）
• 兼容性：所有浏览器支持，包括 IE6+

clear: left 只避开左侧浮动元素

clear: left 的作用很具体：它只检查**紧邻的前一个或多个兄弟元素中是否有 float: left 的元素**，如果存在，就把自己往下推，直到不再和它们的右边缘（即浮动区域底部）重叠；但它完全不管右侧有没有 float: right 元素——那些仍可能“侵入”它的上边距或行框空间。

典型误用：想让一个文字块避开左侧广告图+右侧悬浮按钮，却只设 clear: left，结果文字被右侧按钮遮挡或错位。