问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应。
参考链接 https://www.cnblogs.com/chengzp/p/layout.html
1、浮动解决方案
使用浮动实现此三栏布局
其中html结构如下：浮动的左右两栏要写在自适应栏前面
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1、这是一个三栏布局浮动中间部分
1、这是一个三栏布局浮动中间部分
</div>
</article>实现代码：
<!--浮动解决方案-->
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left; /*左栏向左浮动*/
width:300px;
background: red;
}
.layout.float .right{
float:right; /*右栏向右浮动*/
width:300px;
background: yellow;
}
.layout.float .center{
background: #ccc;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1、这是一个三栏布局浮动中间部分
1、这是一个三栏布局浮动中间部分
</div>
</article>
</section>浮动布局缺点：浮动布局是有局限性的，浮动元素是脱离文档流，后面需要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
浮动布局的优点：比较简单，兼容性也比较好。
总结：只要清除浮动做的好，是没有什么问题的。
延伸：你知道哪些清除浮动的方案？每种方案的有什么优缺点?
2、绝对定位解决方案
代码实现如下：
<!--绝对定位解决方案-->
<section class="layout absolute">
<style media="screen">
.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: #ccc;
}
.layout.absolute .right{
right:0; /*绝对定位在最右边*/
width:300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div><!--这里不需要把right写在center前面-->
<div class="center">
<h2>绝对定位解决方案</h2>
1、这是一个三栏布局绝对定位中间部分
2、这是一个三栏布局绝对定位中间部分
</div>
<div class="right"></div>
</article>
</section>绝对定位布局优点：快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。
绝对定位布局缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
3、flexbox解决方案
代码实现如下：
<!--flexbox解决方案-->
<section class="layout flexbox">
<style media="screen">
.layout.flexbox{
margin-top:140px;
}
.layout.flexbox .left-center-right{
display: flex; /*父元素设置显示方式为flex*/
min-height:100px;
}
.layout.flexbox .left{
width:300px;
background: red;
}
.layout.flexbox .center{
flex:1; /*中间自适应部分占据剩下所以空间*/
background: #ccc;
}
.layout.flexbox .right{
width:300px;
background: yellow;
}
</style>
<artical class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1、这是一个三栏布局flexbox中间部分
2、这是一个三栏布局flexbox中间部分
</div>
<div class="right"></div>
</artical>
</section>在这里讲一下flexible Box，任何一个容器都可以指定为flex布局，display:flex; 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
容器有六个属性：
1、flex-direction（定义排列方向）；
2、flex-wrap（控制flex容器是单行或是多行）；
3、flex-flow（前两条可以简写成flex-flow）；
4、justify-content（控制伸缩项在主轴的展现方式）；
5、align-items（控制伸缩项在侧轴的展现方式）；
6、align-content（控制多行（列）伸缩项在侧轴的展现方式，单行（列）时不生效）；
项目有六个属性：
1、order（可以改变伸缩项的位置，默认值是0，数值小的排在前面）；
2、flex-grow（定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）；
3、flex-shrink（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）；
4、flex-basis（定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小）；
5、flex（flex-grow,flex-shrink,flex-basis三项的缩写，默认值为0 1 auto，其中后两个是可选的）；
6、align-self（允许单个项目有与其他项目不一样的对齐方式）；
flex:1;有两个意思：
1、存在多个项目，项目之间的等比例空间分配；
2、只有一个项目，此项目分配所有剩余空间；
因此，这里的flex:1;是分配剩下的所有空间。
felxbox布局的优点：它是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。
felxbox布局的缺点：不能兼容IE8及以下浏览器。
4、表格布局解决方案
代码实现如下：
<!--表格布局解决方案-->
<section class="layout table">
<style media="screen">
.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: #ccc;
}
.layout.table .right{
width:300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局</h2>
1、这是一个三栏布局表格布局中间部分
2、这是一个三栏布局表格布局中间部分
</div>
<div class="right"></div>
</article>
</section>表格布局在历史上遭到很多人的摒弃，说表格布局麻烦，操作比较繁琐，其实这是一种误解，在很多场景中，表格布局还是很适用的，比如这个三栏布局，用表格布局就轻易写出来了。还有表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局。
表格布局也是有缺陷的，当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。
5、网格布局解决方案
<!--网格布局解决方案-->
<section class="layout grid">
<style type="text/css">
.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: #ccc;
}
.layout.grid .right{
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>网格布局</h2>
1、这是一个三栏布局网格布局中间部分
2、这是一个三栏布局网格布局中间部分
</div>
<div class="right"></div>
</article>
</section>网格布局是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。
一开始你需要使用display：grid把容器元素定义为一个网格，使用grid-template-columns和grid-template-rows设置列和行大小，然后使用grid-column 和 grid-row把它的子元素放入网格。 与flexbox类似，网格子元素的原始顺序不重要。 你的可以在 CSS 里以任意顺序放置它们，这使得使用媒体查询重新排列网格变得非常容易。 想象一下，我们需要定义整个页面的布局，然后为了适应不同的屏幕宽度完全重新排列，我们只需要几行CSS就能实现这个需求。 网格是有史以来最强大的CSS模块之一。
其他
还有之前博客中https://blog.csdn.net/betty13006159467/article/details/82178252提到的圣杯模型和双飞翼模型，也能实现三栏布局，两栏固宽，中间自适应的效果。