清除浮动的方法

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

属性值                                            描述

left                                                  不允许左侧有浮动元素（清除左侧浮动的影响）

right                                                不允许右侧有浮动元素（清除右侧浮动的影响）

both                                                同时清除左右两侧浮动的影响

父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

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

使用after伪元素清除浮动

after 方式为空元素的升级版，好处是不用单独加标签 ，使用方法如下：

.clearfix：after{  content: "." ; display: block; height: 0; clear: both; visibility: hidden;  }

.clearfix {*zoom:1;}   /*IE6，7 专有*/

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

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

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

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁

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