浮动特性：
1.脱离标准文档流
2.相互贴靠
3.字体围绕
4.自动变成 inline-block元素
清除浮动方法：
1.给浮动元素的祖先元素设置高度
2.设置 clear: both; （问题：会造成margin-top失效）
例如：
<div id="top"></div>
<div id="center"></div>
<div id="bottom"></div>
<style>
body{margin: 0;}
#top,#center,#bottom{
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 10px;
}
#top,#bottom{
float: left;
}
#center{
clear:both;
margin: 20px;
}
</style>
会出现下列情况：
test.png
可以看到，只有margin-top失效了，也就是这种方法的缺陷。
3.添加空的div标签
一、内部添加标签
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clear"></div>
</div>
<div class="div2"> div2 </div>
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear: both;}
效果：（使div1被撑开，有了高度）
test.png
二、外部添加标签
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="clear"></div>
<div class="div2"> div2 </div>
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear: both;}
效果：虽然也起到了清除浮动的效果，但是div1没有被撑开。
test.png
4.父级div定义 overflow:hidden
缺点：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。不能和position配合使用，因为超出的尺寸的会被隐藏。
zoom(IE专有属性)可解决ie6,ie7浮动问题
5.父级div定义 伪类:after 和 zoom
<div class="div1 clear">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2"> div2 </div>
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
缺点：IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题
6.父级div定义 overflow:auto
缺点：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 ，内部宽高超过父级div时，会出现滚动条。
