清除浮动的方法:
方法一：给浮动元素的父亲元素添加属性：overflow： auto；
<style type="text/css">
*{padding:0;margin:0;}
.clearfix{
border: 3px solid green;
width: 200px;
overflow: auto;//这里是关键
zoom: 1;//可以支持IE6
}
.left{
width: 100px;
height: 100px;
float:left;
background: red;
}
.right{
width: 100px;
height: 100px;
float:left;
background: #000;
}
</style>
</head>
<body>
<section class="clearfix">
<div class="left"></div>
<div class="right"></div>
</section>
方法二：运用after伪类
<section class="clearfix">
<div class="left"></div>
<div class="right"></div>
</section>
.clearfix:after{
content:".";
display: block;
clear: both;
height: 0;
line-height:0;
font-size: 0;
visibility: hidden;
}
.clearfix{
zoom: 1;
}
原文：http://www.cnblogs.com/maomichaoren/p/7474138.html