[分享]css中clear的作用是什么

在CSS中，我们经常会看到一个叫做clear的属性，那么它的作用是什么呢？其实，clear的作用就是清除浮动元素带来的影响。我们知道，浮动元素脱离了文档流，会导致它们的父元素的高度无法被正常计算，从而...

在CSS中，我们经常会看到一个叫做clear的属性，那么它的作用是什么呢？

其实，clear的作用就是清除浮动元素带来的影响。我们知道，浮动元素脱离了文档流，会导致它们的父元素的高度无法被正常计算，从而影响布局。

举个例子，如果我们让一个div浮动到左边，然后让另一个div也浮动到左边，结果第二个div就会紧贴在第一个div的右边，而不是它们应该在的位置。

<div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
<div style="float: left; width: 100px; height: 100px; background-color: blue;"></div> 

这时候，我们就可以在第三个元素中使用clear属性，以便他们能够按照正常的布局方式排列。

<div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
<div style="float: left; width: 100px; height: 100px; background-color: blue;"></div>
<div style="clear: both;"></div> 

这个clear的值有3种：

• left：清除左侧浮动
• right：清除右侧浮动
• both：同时清除左右两侧的浮动

总之，使用clear属性可以很好地解决浮动带来的问题，使布局更加稳定和可靠。