float 清除浮动的三种方式

 

1.使用伪元素清除浮动
.box::after{ content: " "; clear: both; display: block;}
.left,.right{ width:100px; height: 100px; background:#388bff; 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:#388bff; float: left;}
<div class="box">
<div class="left"></div>

<div class="right"></div>
</div>
3.使用空div
.clear{ clear:both; }
<div class=”clear”></div>