三栏布局的七种解决方案

题目：设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应。
常见的布局方式: 浮动(float)布局、定位(Position)布局、弹性(flex)布局、表格(table)布局、网格(grid)布局、圣杯布局、双飞翼布局。

---

公共样式
首先把公共样式放在头部，代码如下：

不同布局方式使用

标签区别，该标签来定义文档中的节（section、区段）；

标签规定独立的自包含内容。

---

1、浮动(float)布局

    
    

        

        

        

            
浮动解决方案
            1.这是三栏布局浮动方案中间部分
            
增加高度
            
增加高度
            
增加高度
            
增加高度
            
增加高度
        
    

优点：兼容性较好；代码简单；清除浮动处理好的前提下一般没有其他问题。
缺点：脱离文档流，出现占位问题(如上图-中间部分在块中内容超出时占了左右的位置)；清除浮动做不好出现高度塌陷问题(解决方法)。

---

2、定位(Position)布局

    
    

        

        

            
绝对定位解决方案
            2.这是三栏布局绝对定位方案中间部分
            
增加高度
            
增加高度
            
增加高度
            
增加高度
        
        

    

优点：很快捷，配合js使用很方便。
缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。

---

3、弹性(flex)布局

    
    

        

        

            
flexbox解决方案
            3.这是三栏布局flexbox方案中间部分
            
增加高度
            
增加高度
            
增加高度
            
增加高度
            
增加高度
            
增加高度
        
        

    

优点：该方案可以解决上述两种方案的不足，是比较完美的一个；目前移动端的布局也都是用flexbox。 
缺点：不能兼容IE8及以下浏览器。

---

4、表格(table)布局

    
    

        

        

            
表格布局解决方案
            4.这是表格布局方案中间部分
            
增加高度
            
增加高度
            
增加高度
            
增加高度
            
增加高度
        
        

    

优点：实现容易；兼容性好，IE8不支持flex但是支持table。 
缺点：其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，有时候这种效果不是我们想要的。

---

5、网格(grid)布局

    
    

        

        

            
网格布局解决方案
            5.这是三栏布局网格布局解决方案
            
增加高度
            
增加会溢出

        
        
 
    

优点：将复杂的事情简单化；CSS3新出的标准(追求热点的你怎能错过？)