清除浮动的三种常用方式:

清除浮动的三种常用方式:

清除浮动目的 : 主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

1. 父级添加overflow属性方法

给父级添加 :overflow:hidden|auto|scroll;加三者任一都可以实现 .

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

2.使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after { 
          content: "."; 
          display: block;
          clear: both;
          visibility: hidden;
          }
.clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 , 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1兼容处理,触发 hasLayout(IE7以下浏览器的特有属性)。

注意： content:”.” 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

3 . 使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,
.clearfix:after { 
         content:"";
         display:table;
  /* 这句话可以出发BFC BFC可以清除浮动 */
  }

.clearfix:after {
         clear:both;
         }

.clearfix {
         *zoom:1;
         }

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。