清除浮动的方法

浮动的定义：使元素脱离文档流（是指文档中可显示对象在排列时所占的位置），按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来

 

Float的特征

1、块在一行显示

2、行内属性标签支持宽高

3、没有宽度的时候内容撑开宽度

4、脱离文档流

5、提升层级半层

 

清除浮动的方法：

1、加高（问题：扩展性不好）

2、父级浮动（页面中所有元素都加浮动，margin左右自动失效）

3、inline-block清浮动方法（问题：margin左右auto失效）

4、空标签清楚浮动（问题：ie6最小高度19px，解决后还有2px的偏差）

5.  .br清楚浮动  <br  clear=“all”/>

6、after伪类（给某一类元素添加特殊的效果） 清除浮动的方法（主流方法）

.clear:after{content:’’;display:block;clear:both;}

:after{content”添加的内容”；}IE6，7下不兼容

.clear{zoom:1}

zoom缩放

 

eg：给父级加.clearfix类 

添加样式如下：

.clearfix:after{content:’’;display:block;clear:both}

.clearfix{*zoom:1}  //兼容IE6.7

 

7、overflow：hidden 清除浮动方法

问题：需要配合宽度或者zoom兼容IE6、7

a、触发IE下haslayout，使元素根据自身内容计算高度

b、ff不支持