常用的清除浮动的几种方法总结下：
1，手动设置一个标签（在浮动元素下方），然后对其设置clear属性
2，给浮动元素设置 :after伪类，创建块元素，设置clear属性
3，给父元素设置浮动
4，给父元素设置overflow设置非visible值（auto，hidden）
5，给父元素的display设置为table-cell
7，在ie6,7中，设置zoom或者width，height来触发haslayout，使父元素包含浮动元素
原理剖析：
1,2方法之所以可以成功，是因为了clear属性。规范上说，对一个元素设置clear属性，那么该元素的上边框紧邻着浮动元素的margin-bottom渲染（假设元素上方为浮动元素，若不是浮动元素，则按照margin的设置进行布局）。这样对height设为auto的父元素而言，高度自然是包含了浮动元素。
3,4,5方法主要激活了父元素的块级格式化上下文“属性”。块级格式化上下文有一些与块框不同的属性：
1）包含浮动元素
2）不会被浮动元素遮盖
3）防止外边距叠加
激活BFC的条件有一些，他们是：
1）设置浮动
2）设置绝对（固定）定位
3）设置display：inline-block,table-cell,table-caption(设置为table也可以起作用，但是不是因为是它的功效，是因为设置display：table，css会添加匿名表单，自然也包含table-cell，因此该匿名表单也拥有块级格式化上下文)
4）overflow:auto || hidden || scroll
7方法只对IE6,7有效，触发hasLayout的方式：
1）设置width和height值（非auto）
2）设置浮动
3）display：inline-block
4）zoom：（非auto）
5）display：absolute
另外，Nicolas Gallagher提出了一种更完美的做法：
/* For modern browsers */
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }
之所以使用 伪元素:before，是为了防止内部元素与该元素的外边距叠加。该元素内部第一个子元素的display设置为table，则会创建一个BFC，避免了外边距叠加。