清除浮动

清除浮动的方法

• 父元素添加overflow:hidden（不推荐)

  • 优点：代码简洁
    缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素不推荐使用

• 使用after伪元素清除浮动
  :after{
  content: “”;
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
  }
  .clearfix{
  *zoom: 1;/ie6清除浮动的方式 星号只有IE6-IE7执行，其他浏览器不执行/

  • 优点：符合闭合浮动思想，结构语义化正确
    缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

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

• clear：after,clear：:before{
  content: “”;
  display: table;
  }
  .clearfix:after{
  clear: both;
  }
  .clearfix{
  *zoom: 1;
  }