一、清除浮动的目的。

　　1、当一个父元素的高度不写或为auto时，而且这个父元素内又有浮动的子元素，那么这时候该父元素的高度将不会自动适应子元素的高度，也可以说高度是0px;

　　有如下代码：

     
        
      
       123123
      
    
     

　　此代码父元素高度不设置，而且里面又有左浮动高度为300px的子元素。实际显示效果为：

　　　　

　　　　可以看到，父div仅仅显示为其边框的高度，并没有适应其子元素的高度，要正确显示父元素的边框的话，此时就要清除浮动。我们在原来的代码的基础上加多一个<br/>以用于清除浮动，实际代码如下：

     
        
      
       123123
      
        
      
　　//此行代码用于清除浮动    
     

　　　　现在再来看看现在的效果：

　　　　

　　　　注意：清除浮动的元素要放在正确的位置上，必须紧贴着浮动元素。

　　2、布局错位问题。

　　　　因为浮动元素脱离了标准文档流，因此其它非浮动元素可能会受此影响而错位。

　　　　例如有如下代码：

     
        
      
       左浮动元素
      
        
      
       右浮动元素
      
     
        
     
      看看我的位置
     

　　　　理论上说来，最下面的div与上面的div没有关系，因此会自动排到上面的div的下面一行。来看效果：

　　　　

　　　　可以看到，效果不像预期，究其原因，还是上面的父div高度不适应子浮动元素而导致，高度仅仅为边框的高度，从而下面的div自动顶上去了，因此到此错位

　　　　我们来改写上面的代码如下所示：

     
        
      
       左浮动元素
      
        
      
       右浮动元素
      
        
      
     
        
     
      看看我的位置
     

　　　　上面的代码仅仅添加了一个<br/>元素用于清除浮动，来看最终效果。

　　　　

　　　　看到效果已经正确了。

　　　　但是，如果清除浮动的元素的位置放置不正确会有什么后果呢？再来改写下面的代码：

     
        
      
       左浮动元素
      
        
      
       右浮动元素
      
     
        
    //稍稍调整了一下清除浮动的元素的位置        
     
      看看我的位置
     
　　

　　　　效果如下：

　　　　

　　　　可以看到，虽然下面的div的位置正确了，但是上面的父元素还是没有适应子浮动元素的高度。

 　　今天公司的前端发给了我一个清除浮动的解决方法列表，觉得挺好的，有的甚至见都未见过。整理如下：

1. float　　缺点：层层往上找，没完没了，到了body那，算是个头  float 和 margin:0 auto; 有冲突2. display:inline-block;　　缺点：不能设置 margin:0 auto;3. overflow:hidden;　　缺点：很多JS交互特效做不了，多出去的部分隐藏了4. 在父级内，加空DIV：clear:both; 　　缺点：父级不能加padding，否则IE6 IE7不兼容5. 
　　缺点：每次都要加这个换行符6. .clear:after { content: '\20'; clear: both; display: block; }　　缺点：如果代码多了点，也叫缺点的话……　　此外，如果父级没有宽，就必须为父级加上：zoom:1;用来解决IE6 IE7下的问题