在前端开发中,清除浮动技术是每个前端工程师必需要掌握的,因此小编总结了清除浮动的几种方法,代码如下:

页面骨架如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*公共的css样式*/
.big{border: 1px solid red;}
.small{width: 100px;height: 100px;background: blue;float: left;}
.small2{background: pink;height: 100px;width: 100px;float: left;}
.main{width: 300px;height: 100px;background: black;}
.clear{clear: both;}
</style>
</head>
<body>
<div class="big">
<div class="small">我是1</div>
<div class="small2">我是2</div>
</div>
<div class="main"></div>
</body>
</html>

第一种清除浮动方法如下:

1
2
3
4
5
/*只需在.big中加height就行*/
.big{
border: 1px solid red;
height: 100px;
}

第二种清除浮动方法如下:

1
2
3
4
5
6
/*第二种方法叫,内墙法,就是在.big里面加个div,并加class为clear*/
<div class="big">
<div class="small">我是1</div>
<div class="small2">我是2</div>
<div class="clear"></div>
</div>

第三种清除浮动方法如下:

/第三种方法叫,外墙法,就是在.big后面加个div,并加class为clear/

1
2
3
4
5
<div class="big">
<div class="small">我是1</div>
<div class="small2">我是2</div>
</div>
<div class="clear"></div>

第四种清除浮动方法如下:

/第四种方法,利用overflow属性,只需在.big里面加overflow:hiddle;/

1
2
3
4
5
.big{
border: 1px solid red;
overflow: hidden;
*zoom: 1; /*由于伪元素清除浮动不兼容IE6,IE7,所以用这句代码来触发 hasLayout */
}

第五种清除浮动方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
/*第五种方法,利用伪元素,after来清除浮动*/
.big{
border: 1px solid red;
*zoom: 1; /* 由于伪元素清除浮动不兼容IE6,IE7,所以用这句代码来触发 hasLayout */
}
.big:after{
content: "."; /*最好content中不要为空,最好在content中加.原因:firefox 7.0前的版本会有生成空格*/
display: block;;
height: 0px;
visibility: hidden;
clear: both;
}

第六种清除浮动方法如下:

1
2
3
4
5
6
7
8
9
10
11
/*也就是前面第五种的加强版*/
.big{
border: 1px solid red;
*zoom: 1; /* 由于伪元素清除浮动不兼容IE6,IE7,所以用这句代码来触发 hasLayout */
}
.big:after{
content: "\200B"; /*200B表示空格的意思,而且这种方法不用加 visibility: hidden;*/
display: block;;
height: 0px;
clear: both;
}

第七种清除浮动方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
/*第七种方法叫:闭合清除法,也叫双伪元素清除法*/
.big{
border: 1px solid red;
*zoom: 1; /*由于伪元素清除浮动不兼容IE6,IE7,所以用这句代码来触发 hasLayout */
}
.big:before,.big:after{
content:"";
display:table;
}
.big:after{
clear: both;
}

总结:这七中方法中,第三种方法是不能将盒子的高撑开的,在企业开发中第一种方法到第四种方法,是不推荐使用的,在企业开发中用的最多的是,第六种方法和第七种方法,并且国类的大型网站,最喜欢用第六种方法和第七种方法,因此强烈推荐使用后面两种方法.