高度已知，三欄布局，左右各300px，中間自適應(yīng)，能夠?qū)崿F(xiàn)的方法

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;

這樣可以清除浮動，但是也存在較大弊端，如果父級內(nèi)容超出會被隱藏

方案2：給浮動元素下方條件一個空的div,給div單獨加個樣式

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

但是這個就需要在頁面上新增標(biāo)簽，影響頁面的加載

方案3：萬能清除浮動法

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