当容器未设置高度的时候，容器里面的内容有浮动的元素，这时容器的高度不能自动伸长去适应内容的高度，使得容器塌陷，内容溢出到容器外面而影响布局。这个现象叫浮动溢出，为了防止这个现象的出现，需要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;}