前端经典三栏布局，中间自适应。

1. 首先第一种我们常用的float方法
   需要注意的是该方法的中间部分center要放在right盒子之后。

  html *{
            padding:0;
            margin: 0;
        }
        .layout article div{
            min-height: 100px;
        }
        .layout.float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .layout.float .center{
            background: yellow;
        }
html部分：
 <section class="layout float">
       <article class="left-right-center">
           <div class="left">div>
           <div class="right">div>
           <div class="center">
               <h1>浮动解决方案h1>
                <h2>注意内容主体放在最后h2>
           div>
       article>
   section>

2.绝对定位法，使用position来实现：

html *{
            padding: 0;
            margin: 0;
        }

        .layout article div{
               min-height: 300px;
        }

        .layout.absolute .left-center-right>div{
              position: absolute;
        }

        .layout.absolute .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .layout.absolute .center{
            left: 300px;
            right:300px;
            background: yellow;
        }
        .layout.absolute .right{
            right:0;
            width: 300px;
            background: blue;
        }
html部分：
"layout absolute">
       
"left-center-right">
           
"left">
           
"center">
               
绝对定位解决方案
               1、这是三栏布局绝对定位中间部分
           
           
"right">
       
   

3.第三种弹性布局flex

 html *{
           margin: 0;
           padding: 0;
       }
        .layout article div{
            min-height: 100px;
        }
        .layout.flexbox .left-center-right{
            display: flex;
        }
        .layout.flexbox .left{
            width: 300px;
            background: red;
        }
        .layout.flexbox .center{
            flex: 1;
            background: yellow;
        }
        .layout.flexbox .right{
            width: 300px;
            background: blue;
        }
   html部分：
   
"layout flexbox">
    
"left-center-right">
        
"left">
        
"center">
            
这是flexbox的解决方案
            1.这是三栏布局的中间部分
        
        
"right">
    

4.第四种table布局

html *{
            margin: 0;
            padding: 0;
        }
        .layout article div{
            min-height: 300px;
        }
        .layout.table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout.table .left-center-right>div{
            display: table-cell;
        }
        .layout.table .left{
            width: 300px;
            background: red;
        }
        .layout.table .center{
            background: yellow;
        }
        .layout.table .right{
            width: 300px;
            background: blue;
        }
   html部分：
   
"layout table">
        
"left-center-right">
            
"left">
            
"center">
                
表格布局
                1.这是三栏布局表格布局中间部分
            
            
"right">
        
    

5.网格布局grid是html5的新属性

 html *{
            padding: 0;
            margin: 0;
        }

      .layout.grid .left-center-right{
          display: grid;
          width: 100%;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
      }
        .layout.grid .left{
            background: red;
        }
        .layout.grid .center{
            background: yellow;
        }
        .layout.grid .right{
            background: blue;
        }
  html部分：
  
class="layout grid">
       <div class="left-center-right">
           <div class="left">div>
           <div class="center">
               
网格布局
           div>
           <div class="right">div>
       div>
   

这五种方案通常pc中可以使用float和table布局来实现，移动端可以使用flex来实现grid也可以，绝对定位的方案脱离文档流可用性很差，而且项目中也不这么写代买，浮动布局需要处理好BFC的问题就可以了。