清除浮动的方法:
方法一：给浮动元素的父亲元素添加属性：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;
}
css清除浮动
原文地址：http://www.cnblogs.com/maomichaoren/p/7474138.html