前言

所谓三栏布局，即使指两边定宽，中间宽度自使用的布局方式，在过去，一直是一个麻烦的问题，

正文

1. 浮动布局

   HTML如下：

         
          Left
         
         
          Right
         
         
          Main
         

   CSS如下：

   body, html {     height: 100%;     padding: 0;     margin: 0;   }   .left{     background: red;     width:100px;     float: left;     height:100%;   }   .main{     background:blue;     height:100%;     margin-left:100px;     margin-right:200px;   }   .right{     background:red;     width:200px;     float: right;     height:100%;   }

   浮动布局代码比较简洁，同时也易于理解，但是浮动往往会带来塌陷等问题，而且浮动渲染计算量

   较大，在移动端性能表现较差。另一个需要注意的是，main即中间部分需要放在最后，如果是left-main-right的方式

纳闷main部分将会占满剩余空间，right也就被挤到下一行了，相反，如果我们设置了right和left，在设置main

1. 绝对定位

   HTML如下：

         
          left
         
         
          main
         
         
          right
         

   CSS如下：

   body, html {  height: 100%;  padding: 0;  margin: 0;}.left, .right {  position: absolute;  top: 0;  background: red;  height: 100%;}.left {  left: 0;  width: 100px;}.right {  right: 0;  width: 200px;}.main {  margin-left: 100px;  margin-right: 200px;  height: 100%;  background: blue;}

   该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况

2. 圣杯布局

   圣杯布局巧妙的利用负margin来使元素上移，再结合相对定位，移到外层容器的padding位置，从而达到目标HTML如下：

         
          main
         
         
          left
         
         
          right
         

   CSS如下：

   body, html {     height: 100%;     padding: 0;     margin: 0;   }   body{     padding-left:100px;     padding-right:200px;   }   .left{     background: red;     width:100px;     float: left;     margin-left:-100%;/*-100%：1、导致left超出body内容(此时body内容宽度只有100%-200-100）移到上层2：margin是根据父元素的宽度的，所以-100%就到上层body内容的最前*/     position: relative;     left:-100px;/*-100px为了超出body内容左边,到达视窗最左*/     height:100%;   }   .main{     background: blue;     width:100%;     height:100%;     float: left;   }   .right{     background:red;     width:200px;     height:100%;     float: left;     margin-left:-200px;/*-200px为了超出body内容到达上一层body内容最后*/     position: relative;     right:-200px;/*-200px是为了向右偏移回到视窗最右*/   }   .container{     width:500px;     height:200px;   }

   问题：如果外层内容盒宽度过小，不足以容纳.left的宽度，那么.left依然会被保留在下层

3. 双飞翼布局

   双飞翼布局与圣杯布局原理类似，只不过是取消了外层的padding，从而使内容盒等于padding-box从而避免了.left上移后需要设置left值移动到paddingHTML如下：

         
     
          
               main  
          
         
         
            left
         
         
            right
         

   CSS如下：

   body, html {    height: 100%;    padding: 0;    margin: 0;  }  body{    /*padding-left:100px;*/    /*padding-right:200px;*/  }  .left{    background: red;    width:100px;    float: left;    margin-left:-100%;/*-100% 1：是为了超出body内容(此时body内容为100%)最左 2：到达body上层内容最左也就是视窗最左    /*position: relative;*/    /*left:-100px;*/    height:100%;  }  .main{    background: blue;    width:100%;    height:100%;    float: left;  }  .right{    background:red;    width:200px;    height:100%;    float: left;    margin-left:-200px;/*-200px 1：是为了超出body内容(此时body内容为100%)最左 2：到达body上层内容最右也就是视窗最右    /*position: relative;*/    /*right:-200px;*/  }  .inner{    margin-left:100px;    margin-right:200px;  }

   与圣杯布局不同的地方已用注释指出，而双飞翼问题与圣杯一样

4. flexbox布局

   flexbox布局可谓是最为理想的解决方案了，一方面，代码简洁易懂，另一方面，当宽度太小时，也可以通过伸缩，避免重叠HTML如下：

         
          main
         
         
          left
         
         
          right
         

CSS如下：

body,html{   height:100%;   padding: 0;   margin:0; } body{   display: flex;   flex-flow:row nowrap; } .left{   background: red;   width:100px;   height:100%;   order:0; } .main{   background-color: blue;   flex:1;   height:100%;   order:1; } .right{   background: red;   width:200px;   height:100%;   order:2; }