在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种:
总之,使用clear属性可以很好地解决浮动带来的问题,使布局更加稳定和可靠。
粉丝
0
关注
0
收藏
0