页面布局：假设高度已知，请写出三栏布局，其中左栏、由栏宽度各自为300px,中间自适应

学习整理

方法一：浮动

<style>
* {
    padding:0;
    margin:0;
}
.layout article div {
    min-height: 100px;
}
.left{
    float: left;
    width:300px;
    background: blue;
}
.right{
    float: right;
    width:300px;
    background: red;
}
.center {
    background: yellow;
}
</style>
<section class="layout float">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article >
</section>

方法二：绝对定位

<style>
.left-right-center>div {
    position: absolute;
}
.layout article div {
    min-height: 100px;
}
.left{
    left: 0;
    width:300px;
    background: blue;
}
.center {
    left: 300px;
    right: 300px;
    background: yellow;
}
.right{
    right: 0;
    background: red;
}
</style>
<section class="layout absolute">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article >
</section>

方法三：flexbox

<style>
.flexbox {
    margin-top: 140px;
}
.left-right-center {
    display: flex;
}
.layout article div {
    min-height: 100px;
}
.left{
    width:300px;
    background: blue;
}
.center {
    flex: 1;
    background: yellow;
}
.right{
    width: 300px;
    background: red;
}
</style>
<section class="layout flexbox">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article >
</section>

方法四：表格布局

<style>
.left-right-center {
    width: 100%;
    display: table;
    height: 100px;
}
.layout article div {
    display: table-cell;
}
.left{
    width:300px;
    background: blue;
}
.center {
    background: yellow;
}
.right{
    width: 300px;
    background: red;
}
</style>
<section class="layout table">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article >
</section>

方法五：网格布局

<style>
.left-right-center {
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 200px auto 300px;
}
.left{
    background: blue;
}
.center {
    background: yellow;
}
.right{
    background: red;
}
</style>
<section class="layout grid">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article >
</section>

优缺点：

（1）浮动：

缺点：脱离文档流

优点：兼容性好

（2）绝对定位：

缺点：布局脱离文档流，子元素脱离文档流，可使用性差

优点：快捷

（3）flexbox：

缺点：有的ie版本不兼容

优点：完美

（4）表格布局：

缺点：麻烦，操作繁琐，不利于搜索引擎抓取信息

优点：兼容性好

（5）网格布局：

优点：代码少

高度已知去掉哪个不再适用：

浮动，定位，网格布局

兼容性如何：