七种方式实现三栏布局

三栏布局：两边固定，中间自适应

一.流体布局（float布局）

1.首先绘制左右两栏，左栏左浮动，右栏右浮动

2.再绘制中间一栏，留出左右两栏距离与间距

  
"container">
    
"left">left
    
"right">right
    
"mid">mid
  

缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验

二、BFC布局

我们先把左右两栏元素浮动，中间栏不做其他属性，发现中间栏默认撑满全屏，这时候我们就可以利用BFC不会和浮动元素重叠的规则，把中间元素改成一个BFC，使用overflow:hidden或者display: flex达到中间栏自适应

  
"container">
    
"left">left
    
"right">right
    
"mid">mid
  

想了解BFC请看这里BFC

缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验

三、flex布局

flex属性的完整写法是:flex-grow项目放大比例、flex-shrink项目缩小比例 、flex-basis项目占据属性

1.项目绘制按照左中右排列

2.父元素使用flex属性

3.(1)左右两栏固定宽度
赋值给元素width属性
赋值给元素flex属性：flex: 0 1 200px(放大比例0，缩小比例1，项目宽度200px）
(2)中间使用flex:1占据剩余空间

  
"container">
    
"left">left
    
"mid">mid
    
"right">right
  

缺点：无法兼容所有浏览器

四、position定位

1.父元素使用相对定位
2.两侧子元素使用绝对定位
3.中间元素不做定位处理，只留出空间就好

 .container {
    position: relative;
  }

  .left {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0; 
    background-color: aqua;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }

  .mid {
    background-color: cadetblue;
    height: 200px;
	margin: 0 220px;
  }


  

    
mid
    
left
    
right
  

优点：主要内容可以优先加载

五、Table布局

1.先设置外边盒子采用表格布局
2.设置子元素为表格单元格格式
3.左右两栏设置宽度，中间无需设置

  .container {
    display: table;
    width: 100%;
  }
  .left, .mid, .right {
    display: table-cell;
  }

  .left {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  .right { 
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }
  .mid {
    background-color: cadetblue;
    height: 200px;
  } 



  
"container">
    
"left">left
    
"mid">mid
    
"right">right
  

缺点：无法设置栏间距

六、圣杯布局

圣杯布局的核心是浮动、负边距、相对定位、不添加额外标签
左、中、右 三栏都使用float进行浮动，然后通过负值margin进行调整

1.三栏都使用float进行浮动，左右定宽，中间宽度100%
2.因为中间100%所以布局变成这样

 .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  .mid {
    float: left;
    width: 100%;
    height: 200px;
    background-color: cadetblue;
  }

  .right {
    float: left;
    height: 200px;
    width: 200px;
    background-color: aquamarine;
  }



  
"container">
    
"mid">midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid
    
"left">left
    
"right">right
  

3.所以我们使用负边距来调整，先让三栏位于一行，左栏设置margin-left为-100%，此时左栏位于第一行首部，然后将右栏的margin-left为其宽度的负值-200px，右栏也会移动到第一行中

.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin-left: -100%; // 移动左栏到第一行
  }
  .right {
    float: left;
    height: 200px;
    width: 200px;
    background-color: aquamarine;
    margin-left: -200px; // 移动右栏到第一行
  }

4.然后我们发现中间的元素宽度还是占满100%，所以文字被挡住了，然后我们操作父元素给出和左右两栏相等的内边距

 .container {
    margin-left: 200px;
    margin-right: 200px;
  }

然后我们发现文字不被遮挡了，但是盒子被整体压缩了

5.然后我们再使用相对定位把左右两栏"拽"出来：通过left 、right值移动

.left {
	position: relative;
    left: -200px;
}
 .right {
  	position: relative;
  	right: -200px;
 }

完整代码：

  
"container">
    
"mid">midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid
    
"left">left
    
"right">right
  

七、双飞翼布局

双飞翼布局前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡的问题解决方案不同：
在mian内部添加一个content，通过设置左右margin（左右两栏的宽度+间距margin）来避开遮挡

  
"container">
    
"mid">
        
"midContent">
          midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid
        
    
    
"left">left
    
"right">right