清除浮动

5种方法，其中第3,4,5种利用同一原理

 

浮动对页面布局的影响：元素自动补位

如有一对父子元素，且父没有高度，子作浮动时，子会自动往上补位

清除浮动的方法：

1.给父设置高度

 

2.给父设置 overflow：hidden

缺点：离开了父元素的区域的元素会被隐藏

 

3.使用额外标签法：

在浮动的元素下再放一个标签，设置clear：both

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.

b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.

缺点：增加了额外的标签

 

4.使用伪元素（写在父元素里）   　　推荐使用

伪元素：在页面上不存在的元素，但可通过css添加上去

属性：     ：after（在....之后）

.clearfix:after{

     content:"";

     height:0;

     line-height:0;

     display:block;

     clear:both;

     visiblity:hidden;

}

.clearfix{zoom:1}   //为了兼容IE6

 

5.使用双伪元素清除浮动

.clearfix:before,.clearfix:after {

     content: "";

     display: block;

     clear: both;

 }

 

 .clearfix {zoom: 1;}