列举几种清除浮动的方法

原理：所谓浮动是指子元素设置样式float：left 后，脱离了普通文档流，会在遇到其他相同浮动的元素或者父级边框后停留下来，造成高度塌陷的效果。

css代码 浮动前 浮动后

 方法： 

           1、父级元素设置overflow:hidden或overflow:auto。  设置后父级元素的内容，会随着子级的内容的高度自适应。缺点是超出的部分会会被隐藏，同事在IE6下需要触发 hasLayout。给父级增加 zoom：1。

           2、父级同样设置float：left 。独乐乐不如众乐乐，大家都设置，要浮一起浮。

           3、父级设置 display： table, 模拟表格，利用表格的等高特性。

           4、用css的伪元素after .container::after{  content:''; clear:both; display:block; visibility:hidden;} 或者

.container::after{ content:'';  clear:both;  display:table;  } 。由于伪元素属于逻辑上存在，但确不存在文档树上面。

在设置clear：both后，子元素左右两侧已经不允许有浮动元素。这时候再把元素设置为块级元素或者模拟表格，能够达到高度撑开的效果。

缺点是IE6,7不支持after，需要触发hasLayout，得设置zoom:1。

            5、子元素增加空白标签 ：<div style="clear:both"></div>。

             6、子元素增加br标签;  <br clear="all" />。