清除浮动三种方式:
1.使用伪元素清除浮动
.box::after{content:"";clear:both;display:block;}
.left,.right{width:100px;height:100px;background:#fff;float:left;}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
2.使用overflow:hidden清除浮动
.box{overflow:hidden;}//overflow:auto也是可以的
.left,.right{width:100px;height:100px;background:red;float:left;}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
3.使用空div
.clear{clear:both;}
<div class="clear"></div>
1.使用伪元素清除浮动
.box::after{content:"";clear:both;display:block;}
.left,.right{width:100px;height:100px;background:#fff;float:left;}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
2.使用overflow:hidden清除浮动
.box{overflow:hidden;}//overflow:auto也是可以的
.left,.right{width:100px;height:100px;background:red;float:left;}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
3.使用空div
.clear{clear:both;}
<div class="clear"></div>