清除浮动的方法汇总

1、HTML中添加空的div清除浮动

　　HTML代码：

1 <div class="container">
2     <div class="floatDiv">1</div>
3     <div class="floatDiv">2</div>
4     <div class="floatDiv">3</div>
5     <div class="clearfix"></div>
6 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     border: 2px solid #f00;
 8     padding: 10px;
 9 }
10 .container .floatDiv {
11     width: 100px;
12     height: 100px;
13     background: #999;
14     margin-right: 5px;
15     float: left;
16 }
17 /* 清除浮动 */
18 .clearfix {
19     clear: both;
20 }

　　代码少，之前一直用这种方式清除浮动，但是在HTML中增加了空标签，增加了HTML结构的复杂度。

2、after伪类清除浮动

　　HTML代码：

1 <div class="container clearfix">
2     <div>after清浮动</div>
3     <div>after清浮动</div>
4     <div>after清浮动</div>
5 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     /*height: 120px;*/
 8     border: 2px solid #f00;
 9     padding: 10px;
10 }
11 .container div {
12     width: 100px;
13     height: 100px;
14     line-height: 100px;
15     float: left;
16     text-align: center;
17 }
18 .container div:nth-child(1){
19     background: #f00;
20 }
21 .container div:nth-child(2){
22     background: #0f0;
23 }
24 .container div:nth-child(3){
25     background: #00f;
26 }
27 /* 清除浮动 */
28 .clearfix {
29     zoom: 1;
30 }
31 .clearfix:after {
32     clear: both;
33     content: '';
34     display: block;
35     width: 0;
36     height: 0;
37     overflow: hidden;
38 }

　　建议定义公共样式，代码复用。

3、父元素设置overflow:hidden;

　　HTML代码：

1 <div class="container">
2     <div>111</div>
3     <div>222</div>
4     <div>333</div>
5 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     border: 2px solid #000;
 8     padding: 10px;
 9     /* 清除浮动 */
10     overflow: hidden;
11 }
12 .container div {
13     width: 100px;
14     height: 100px;
15     line-height: 100px;
16     background: #f00;
17     text-align: center;
18     margin-right: 5px;
19     float: left;
20 }

4、父元素设置overflow:auto;

　　HTML代码：

1 <div class="container">
2     <div>111</div>
3     <div>222</div>
4     <div>333</div>
5 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     border: 2px solid #000;
 8     padding: 10px;
 9     /* 清除浮动 */
10     overflow: auto;
11 }
12 .container div {
13     width: 100px;
14     height: 100px;
15     line-height: 100px;
16     background: #f00;
17     text-align: center;
18     margin-right: 5px;
19     float: left;
20 }

　　以上方法，推荐使用第二种。