1、父级div定义height

                        
      
            
       
                        左div            
       
            
       
                        右div            
       
        
      
            

原理：手动定义height，就解决了父级div无法自动获取高度的问题

 

2、结尾处加空div标签clear：both

                        
      
            
       
                        左div            
       
            
       
                        右div            
       
            
       
                            
       
        
      
            

原理：添加一个空div，利用css提高的clear：both清除浮动，让父级div能自动获取到高度

 

3、父级定义伪类：after

.box{                background-color:greenyellow;                border: 1px solid red;            }            .left{                float: left;                width: 20%;                height: 200px;                background: #ddd;            }            .right{                float: right;                width: 30%;                height: 80px;                background: #ddd;            }            .box:after{                display: block;                clear: both;                content: "";                height: 0;            }                                
      
            
       
                        左div            
       
            
       
                        右div            
       
        
      
            

原理：和方法2类似

 

4、父级div定义overflow：hidden/auto

                        
      
            
       
                        左div            
       
            
       
                        右div            
       
        
      
            

原理：使用overflow：hidden/auto时，浏览器会自动检查浮动区域的

 

ps:

　　推荐使用伪类的方法清除浮动，浏览器支持好，许多主流网站都是这种方法。