不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
2.使用空DIV清除浮动
这是较为古老的方法了，除了 div ，也有使用其他标签的，但 div 更为适用，因为除了浏览器赋予它的 display: block 外，它没有其他的样式了，也不会有特殊的功能。
（注意：display: block 是浏览器赋予 div 的，存在于浏览器的 user agent stylesheet ，而不是 div 默认 display 的值就为 block ，在 W3C 中，所有的 HTML 标签 display 的默认值都为 inline 。）
代码：
<div class="ele float">box 2</div>
<div style="clear:both"></div>
<div class="ele float">box 3</div>
3.overflow 方法（使用BFC和hasLayout）
在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ，可以闭合浮动。
在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom：1
4.使用 :after伪元素方法（只能避免父元素高度塌陷的问题）
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器。
相对来说，这个办法不但完美兼容主流浏览器，并且也很方便，使用重用的类，可以减轻代码编写，另外网页的结构也会更加清晰。
代码：
<style>
.clearfix {/* 触发 hasLayout */ zoom: 1; }
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
</style>
<div class="box clearfix">
<div class="main left">我设置了左浮动 float: left</div>
<div class="aside left">我是页脚，但是我也设置了左浮动。</div>
</div>
参考文章：?p=583