清除浮动的三种方法

清除浮动的3种方法： 方法一：添加新的元素 、应用 clear：both；（padding不会受影响） HTML： <div class="clear"></div> CSS： .clea

清除浮动的3种方法：

  方法一：添加新的元素 、应用 clear：both；（padding不会受影响）

HTML：

 <div class="clear"></div>

CSS：
   

  .clear{clear:both; height: 0; line-height: 0; font-size: 0}

  方法二：父级div定义 overflow: auto。

     .（父级class）{
     overflow: auto; zoom: 1; } //zoom: 1;是在处理兼容性问题

  方法三： :after 方法：（注意：作用于浮动元素的父亲）
     .（父级class） {zoom:1;}    /*==for IE6/7 Maxthon2==*/
     .（父级class） :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden; }  
其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。

visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。