清除浮动有几种方式，优缺点分别是什么

Posted on

一、 在浮动元素后加一个空的元素

, 设置clear:both; 让父元素自动获取高度；

优点: 简单、代码少，浏览器支持好，不容易出现怪问题
缺点: 增加了空标签，会影响浏览器的解析速度

1
2
3
4
5
6
7
8
9
<div>
　<div class='fl'>左浮动</div>
　<div class='fr'>右浮动</div>
　<div class='clear'></div>
</div>
/*********CSS代码**********/
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}

二、给设置浮动的元素的父级元素添加overflow CSS属性，属性设置为hidden或者auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-----HTML代码---->
<div class='clear' >
<div class='fl'>左浮动</div>
<div class='fr'>右浮动</div>
</div>

/***********CSS代码***********/
.fl{float:left;}
.fr{float:right;}
.clear{
overflow:hidden;
zoom:1; /*兼容IE浏览器*/
}
/***.clear{overflow:auto;}****/

优点：代码少，容易上手，浏览器支持好
缺点：不能和position属性配合使用。同时使用position会出现以下情况：如果是使用hidden清除浮动，超出的部分会被隐藏；如果使用auto清除浮动，子元素的尺寸过大时会出现滚动条

三、使用为元素:after来清除浮动，如右边案例所示，表示在clear类的div元素后插入内容，并设置该内容的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class='clear' >
<div class='fl'>左浮动</div>
<div class='fr'>右浮动</div>
</div>

/***********CSS代码***********/
.fl{float:left;}
.fr{float:right;}
.clear:after{
content:'.';
display:disblock;
width:0;
height:0;
visibility:hidden;
clear:both;
}
.clear{
zoom:1; /*兼容IE浏览器,触发hasLayout*/
}

优点：浏览器支持好，不容易出现一些意想不到的问题，大型网站如新浪、网易等都有使用这个方法
缺点：代码较多，初学者相对其他方式不容易掌握

四、float-in-float，将父级元素和子元素都设置浮动，并在与父级元素同级的下一个相邻元素中设置clear:both;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-----HTML代码---->
<div class='clear' >
<div class='fl'>左浮动</div>
<div class='fr'>右浮动</div>
</div>
<div class='cnt'>content</div>

/***********CSS代码***********/
.fl{float:left;}
.fr{float:right;}
.clear{
float:left;
}
.cnt{
clear:both;
}

缺点：可能会出现新的浮动问题

0%