页面布局

高度已知，三栏布局，左右各300px，中间自适应，能够实现的方法

1.float方法

     <section class="layout float">
        <style>
            .left-right-center>div{
                height:100px;
            }
            .layout.float .left{
                width: 300px;
                float:left;
                background:red;
            }
            .layout.float .right{
                width: 300px;
                float: right;
                background:yellow;
            }
            .layout.float .center{
                background: skyblue;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">float方法</div>
        </article>
    </section>

2.绝对定位

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

3.flex

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

4.table

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

5.grid

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

ps:清除浮动

方案1：

overflow:hidden;

这样可以清除浮动，但是也存在较大弊端，如果父级内容超出会被隐藏

方案2：给浮动元素下方条件一个空的div,给div单独加个样式

  clear:both; 
  height:0; 
  overflow:hidden;

但是这个就需要在页面上新增标签，影响页面的加载

方案3：万能清除浮动法

::afer{ 
  content:' '; 
  clear: both; 
  height:0; 
  overflow:hidden; 
  visibility:hidden; 
  display:block;
}