clear
作用:清除浮动元素对当前元素所产生的影响。
可选值:
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那例
原理:
设置清除浮动以后,浏览器会自动为元素添加一个上外边距,以使其位置不受其他元素的影响。
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.container{
border: 5px solid red;
}
.box1{
width: 100px;
height: 100px;
background-color: aquamarine;
float: left;
}
.box2{
width: 200px;
height: 150px;
background-color: chartreuse;
float: right;
}
box3设置清除左浮动效果:
.box3{
width: 50px;
height: 50px;
background-color:darkgreen;
clear: left
}