总结CSS中清除浮动的三种方法

为什么要清除浮动：
当子元素为设置浮动时，父元素的一些样式会无法正常显示，如给父元素设置的边框，背景图片，背景颜色都会受到影响，不仅如此，还会给父元素的同级元素的排版带来影响。
产生浮动的原因：
由于父元素没有设置具体的高度(有时为了适应子元素中的内容，一般是不给父元素设置高度的，而是根据子元素的内容自动确定父元素的高度)，加上子元素设置了浮动，就会使父元素中的内容无法展开，从而破坏了正常的文档流，造成父元素一些样式无法正常显示，父元素的同级元素排版受到影响的问题。

实例：

在#main元素中给两个子元素#left，#right分别设置为左右浮动，并给#main设置边框和背景颜色。
代码：

  
     
     
  
  
     
  
  

        
   
   

    
    head
   
   
     
  
  
    
  
  

       
   
   

    
    left
   
   
       
   
   

    
    right
   
   
    
  
  
    
  
  

   
   footer
    
  
  
  

在浏览器中的运行结果为

我们会发现，#main的边框被挤成一条线了,而本应该在#main下的#footer元素却直接
跑到#head块下了。这就是设置浮动后带来的影响。
为了让#main块正常显示其样式，我们需要清除浮动带来的影响。
解决浮动常用的三种办法：

1)给父元素设置高度
父元素高度=子元素高度+子元素上下边框大下
给#main元素加上以下代码：
height:404px;

2)添加新的元素,应用clear:both；
在
    <div id="main">
       <div id="left">left</div>
       <div id="right">right</div>
    </div>
中添加一个新的<div>块,代码如下:
<div id="clear"></div>
并设置相应的样式:
#clear{
 clear:both;
}
3)给父元素块添加overflow：auto

        #main{
         background:blue;
         border:2px solid red;
         overflow：auto;
        }
原理:此属性是设置让父元素中的内容紧贴父元素,从而达到清除浮动的作用。

清除浮动后再浏览器中打开的效果：