三栏布局

1、浮动布局（移动端是不推荐使用float）
思想：左边左浮动，右边右浮动，外层清浮动。中间利用margin边距控制距离。dom顺序是left right content (如果变成left content right 样式中要靠margin-top:-高度处理)。另外dom顺序是left right content 元素高度不能用继承的100%

  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
  </div>
    .box{
      clear: both;
   }
    .left{
      float: left;
      width:300px;
      min-height: 300px;
      background:green;
    }
    .right{
      float:right;
      width:100px;
      min-height: 300px;
      background:blue;
      /* margin-top: -300px; */
    }  
    .content{
      background:gold;
      min-height: 300px;
      margin:0 100px 0 300px;
    }

2、定位布局
思想：外相对定位，左右绝对定位。中间margin控制。只样式不同，html中左中右的位置随意

    .box{
      position:relative;
    }
    .left{
      position:absolute;
      left:0;
      top:0;
      width:200px;
      background:orange;
      min-height: 300px;
    }
    .right{
      position:absolute;
      right:0;
      top:0;
      width:300px;
      background:purple;
      min-height: 300px;
    }  
    .content{
      margin:0 300px 0 200px;
      background:blue;
      min-height: 300px;
    }

3、flex布局
思想：盒子flex布局，左右定宽，中间flex：1

  <div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </div>
    .box{
      display: flex;
    }  
    .left{
      width:200px;
      background:orangered;
      min-height:400px;
    }
    .right{
      width:300px;
      background:gold;
      min-height:400px;
    }  
    .content{
      background:blue;
      min-height:400px;
      flex:1
    }

4、table table-cell布局
思想：外层width:100%,display:table；3个内层display:table-cell，左右若不设置宽度，等分，设置，中间是剩余宽度

<div class="box">
    <div class="left">
    </div>
    <div class="con">
    </div>
    <div class="right">
    </div>
</div>
.box{
    width:100%;
    display:table;  
    height:200px;  
}
.left,.con,.right{
    display:table-cell;
    height:200px;  
}
.left{
    width:200px;
    background:red;
    height:200px;  
}
.right{
    width:100px;
    background:pink;
    height:200px;  
}
.con{
    background:gold;
    height:200px;
}

5、calc + inline-block布局
思想：inline-block就会在一行上，calc 能计算剩余宽度，需要解决3px问题
left、right、con都是inline-block，con用calc计算宽度，外层用font-size:0或是内部元素代码无间隙

<div class="box">
    <div class="left">
    </div>
    <div class="con">
    </div>
    <div class="right">
    </div>
</div>
.box{
    font-size:0px;
}
.left,.con,.right{
    display:inline-block;
    height:200px;  
}
.left{
    width:200px;
    background:red;
    height:200px;  
}
.right{
    width:100px;
    background:pink;
    height:200px;  
}
.con{
    background:gold;
    width:calc( 100% - 300px);
    height:200px;
}

无间隙写法

<div class="box">
    <div class="left">
    </div><div class="con">
    </div><div class="right">
    </div>
</div>

6、grid布局

两栏伸缩布局方法同上

推荐阅读更多精彩内容