3、CSS三栏布局，中间自适应的多种方法

高度已知，三栏布局，左右个300px，中间自适应

方法一：

效果图1

效果图2

效果图3

    
    


    

        

            

            

            

                
浮动解决方案
            
        
    

浮动方法
缺点：清除浮动，脱离文档流，
优点：兼容性好
浮动的基本原理，遮挡，创建bfc

方法二：

效果图1

效果图2

效果图3

    
    


    

        

            

            

            

                
绝对定位解决方法
            
        
    

绝对定位
优点：快捷
缺点：子元素脱离文档流，可使用性差
方法三：

效果图1

效果图2

flexbox是让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。

    
    
    


    

        

        

            flex解决方案
        
        
       
    

flex
优点：比较完美
可以实现中间高度不设定，自动增加高度
方法四：

效果图1

效果图2

    
    
    


    

        

            

            

                table解决方案
            
            
       
        
      
    

表格布局
优点：容易做到，兼容性好，pc兼容ie8，flex不适用，表格布局可以，
缺点：每个部分理解为单元格，高度超出时，两侧同时增高
可以实现中间高度不设定，自动增加高度
方法五：

效果图1

效果图2

效果图3

    
    
    


    

        

            

            

                grid网格布局解决方案
            
            
       
        
      
    

网格布局
优点：新技术，css标准化，不用模拟做网格，代码量简化