说到清除浮动的方法，我想网络上应该有不下7,8的方法，介绍这些方法之前，想下为什么清除浮动？
再次回到float这个属性，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。
这就产生了一个问题：浮动元素所在父元素不会自动伸长以便闭合浮动元素，任其“红杏出墙”，这显然不符合我们的“伦理观”，所以要“抓回来”施以家法；那么如何抓呢？
提起css，提起(x)html,首先进入脑海的是楚楚动人的页面吗？不，首先应该是这楚楚动人的页面的背后的“楚楚冻人”吧，那些可恨的梦魇般的浏览器兼容！！！
浏览器中可以自动完成闭合浮动元素的情况：
标准浏览器中可以自动完成闭合浮动元素的方法，在标准浏览器中，这称之为Block-Formatting-Contexts（块格式化上下文）：
a.浮动元素；
b.拥有绝对定位属性的元素；
c.设置inline-block元素；
d.table-cell元素;
e.设置了overflow的元素，比如：auto/hidden。
【注】CSS3中，将Block-formatting-contexts 叫做 flow root。
对于触发方式也做了修改：The value of ‘position’ is neither ‘static’ nor ‘relative’；
那么在IE/win中，就依靠那个“hasLayout”了，触发“layOut”的方法有：
a.浮动元素
b.绝对定位元素
c.display:inline-block
d.zoom：比如常见的设置zoom：1；
e.width/height,比如设置height：1%的方法；
f.overflow/overflow-x/overflow-y [IE7 新增]；
g.max/min-width/height [IE7 新增]；
以上种种方法，要么IEonly，要么cross的情况不理想，于是就产生了适用性方法的需求，尽管有时你可能需要些许hack；
（1）空标签法：
这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear:both"的元素，
强迫容器适应它的高度以便装下所有的float，并没限制使用什么样的标签，有用
<br style="clear:both" />
的，有用空
<div style="clear:both"></div>
的;比如：
<div>
<div style ="float:left; width:40%;" >
<p> Some content </ p >
</div>
<p> Text outside the float </p>
<div style ="clear:both;" ></div>
</div>
（2）父元素使用overflow的方法：
通过设置父元素overflow值设置为hidden或者auto；不过，在<=IE6中使用这个方法，还需要haslayout，
还有，使用overflow=hidden的时候，一旦你有定位需求可能会因此而难以实现，使用这种方法前你应该至少确定：
a.父元素的height是自适应的；
b.浮动元素的宽度不大于父元素的宽度，即没有溢出需求；所以，这种方法也有它的局限性；
<div style ="overflow:hidden; width:100%;">
<div style ="float:left;width:30%;">
<p>the widths of the combined floats never exceed the width of the container</p>
</div>
</div>
（3）伪类:after
这种方法应该说是目前应用最广泛的方法，它的优势：没有多余的标记添加到容器中；通过使用:after产生的content不能接受某些属性，包括'position','float',列表属性，表格属性，但是clear属性可以被接受。
不过，不幸的是，IE不支持:after方法，但又幸运的是，回顾前面，如果IE在父容器拥有Width/Height等layout状态下，会完成自动闭合，称之为“auto-clearing”；那么，对于IE/win，我们使用设定zoom：1的方法的方法来实现和:after一样的效果.于是
一个类似这样的样式出现了：
.clearfix:after{content:".";display:block;height:;clear:both;visibility:hidden;}
.clearfix{zoom:;}
<div class="clearfix"><div style ="float:left;width:30%;" ><p>take :after</p></div>