当容器未设置高度的时候，容器里面的内容有浮动的元素，这时容器的高度不能自动伸长去适应内容的高度，使得容器塌陷，内容溢出到容器外面而影响布局。这个现象叫浮动溢出，为了防止这个现象的出现，需要CSS清除浮动。
方法1:在浮动的div后面增加一个空的div 设置clear：both
html代码
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
css代码
.main{border:1px solid green;}
.clear{clear:both;}
.left{width:100px; float:left;background:red;height:100px;}
.right{width:100px;background:#000000;height:100px;float:left;}
方法2:容器设置overflow：hidden
html代码
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
css代码
.main{border:1px solid green;overflow:hidden }
.left{width:100px; float:left;background:red;height:100px;}
.right{width:100px;background:#000000;height:100px;float:left;}
方法3:使用css的:after伪元素
html代码
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
css代码
.main{border:1px solid green;overflow:hidden }
.main:after{content:'';clear:both;display:block;}
.left{width:100px; float:left;background:red;height:100px;}
.right{width:100px;background:#000000;height:100px;float:left;}
