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

　　HTML代码：

1 
     
      2     
      
       1
      
3     
      
       2
      
4     
      
       3
      
5     
      
6 
     

　　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 
     
      2     
      
       after清浮动
      
3     
      
       after清浮动
      
4     
      
       after清浮动
      
5 
     

　　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 
     
      2     
      
       111
      
3     
      
       222
      
4     
      
       333
      
5 
     

　　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 
     
      2     
      
       111
      
3     
      
       222
      
4     
      
       333
      
5 
     

　　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 }

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