三栏自适应布局

问题：高度已知，请写出三栏布局，其中左栏，右栏宽度各位300px,中间自适应

(一)float布局

<section class="layout float">
<style type="text/css" media="screen">
   .layout.float::after{
       clear: both;
   }

.layout.float .left{
width: 300px;
background: blue;
float: left;
min-height: 100px;
}
.layout.float .right{
width: 300px;
background: yellow;
float: right;
min-height: 100px;
}
.layout.float .center{
background: red;
 
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
<p>1.这是三栏布局的中间部分</p>
<p>1.这是三栏布局的中间部分</p>
</div>
</article>
</section>

（二）绝对定位布局

<section class="layout absolute">
<style type="text/css" media="screen">


     .layout.absolute .left-center-right >div{
               position: absolute;
     }
.layout.absolute .left{
width: 300px;
background: blue;
position: absolute;
left: 0;
}
.layout.absolute .center{
left: 300px;
right: 300px;
            background: red;
}
.layout.absolute .right{
width: 300px;
background: yellow;
right:0;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
<p>1.这是三栏布局的中间部分</p>
<p>1.这是三栏布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>

（三）flex布局
<section class="layout flex">
<style type="text/css" media="screen">
    .layout.flex{
    margin-top: 130px;
    }
.layout.flex .left-center-right{
display: flex;
}
.layout.flex .left{
width: 300px;
background: blue;
}
.layout.flex .center{
flex: 1;
background: red;
}
.layout.flex .right{
width: 300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flex解决方案</h1>
<p>1.这是三栏布局的中间部分</p>
<p>1.这是三栏布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>

（四）表格布局
<section class="layout table">
<style type="text/css">
.layout.table .left-center-right{
width: 100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: blue;
}
.layout.table .center{
background: red;
}
.layout.table .right{
width: 300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>table解决方案</h1>
<p>1.这是三栏布局的中间部分</p>
<p>1.这是三栏布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>

（五）grid布局
<section class="layout grid">
<style type="text/css">
    .layout.grid  .left-center-right{
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
    }
.layout.grid .left{
width: 300px;
background: blue;
}
.layout.grid .center{
background: red;
}
.layout.grid .right{
width: 300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>grid解决方案</h1>
<p>1.这是三栏布局的中间部分</p>
<p>1.这是三栏布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>

延伸问题：1.这五种方案各种有什么优点和缺点？
float布局：
优点：兼容性好，只要清除浮动和处理好浮动元素与周边元素的关系处理好。
缺点：常见问题在于浮动浮动以后是脱离文档流的，如果处理不好会带来很多问题，这是float本身的局限性，
绝对定位：
优点：快捷，如果配合css使用，非常快而且也容易出问题，
缺点：布局已经脱离文档流了，意味着下面所有的资源税都必须脱离文档流。有效性，可用性差
flex布局：
优点：解决上述布局的缺点而出现的
缺点：兼容性，IE8不支持
表格布局：
优点：兼容性好，
缺点：除了历史上弊端外，每个单元格高度改变，同行的单元格同增同减
grid布局
优点：当你定义整个页面的布局时，你只需要几行CSS就可以完成页面重排以便适应各种屏幕宽度，
缺点：兼容性差，目前浏览器还不支持Grid布局，IE10和IE11支持老的语法。chrome 57+支持




2.去掉假设高度已知条件去掉，还有那些起作用？
   flex布局和table布局。
3.5种方案的兼容性如何？