css三欄佈局的五種寫法，中間自適應，左右寬度固定

假設高度已知，請寫出三欄佈局，其中左右各位300px，中間自適應
一、左右浮動

<div class="left-center-right">
        <style>
            .left {
                float: left;
                width: 300px;
                background: red;
            }
            .right {
                float: right;
                width: 300px;
                background: green;
            }
            .center {
                background: yellow;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h2>這是浮動佈局</h2>
        </div>
    </div>

二、絕對定位

<div class="left-center-right">
        <style>
            .left-center-right div {
                position: absolute;
            }
            .left {
                left: 0;
                width: 300px;
                background: red;
            }
            .right {
                right: 0;
                width: 300px;
                background: green;
            }
            .center {
                left: 300px;
                right: 300px;
                background: yellow;
            }
        </style>
        <div class="left"></div>
        <div class="center">
            <h2>這是絕對定位</h2>
        </div>
        <div class="right"></div>
    </div>

三、flex佈局

<div class="left-center-right">
            <style>
                .left-center-right {
                    display: flex;
                }
        
                .left {
                    width: 300px;
                    background: red;
                }
        
                .right {
                    width: 300px;
                    background: green;
                }
        
                .center {
                    flex: 1;
                    background: yellow;
                }
            </style>
            <div class="left"></div>
            <div class="center">
                <h2>這是flex佈局</h2>
            </div>
            <div class="right"></div>
            </div>

四、table佈局

<div class="left-center-right">
        <style>
            .left-center-right {
                display: table;
                width: 100%;
            }
            .left-center-right div {
                display: table-cell;
            }
            .left {
                width: 300px;
                background: red;
            }
    
            .right {
                width: 300px;
                background: green;
            }
    
            .center {
                background: yellow;
            }
        </style>
        <div class="left"></div>
        <div class="center">
            <h2>這是table佈局</h2>
        </div>
        <div class="right"></div>
    </div>

五、grid佈局

<div class="left-center-right">
            <style>
                .left-center-right {
                    display: grid;
                    width: 100%;
                    grid-template-rows: 100px;
                    grid-template-columns: 300px auto 300px;
                }
                .left {
                    background: red;
                }
        
                .right {
                    background: green;
                }
                .center {
                    background: yellow;
                }
            </style>
            <div class="left"></div>
            <div class="center">
                <h2>這是grid佈局</h2>
            </div>
            <div class="right"></div>
        </div>

優缺點：
浮動佈局：由於浮動佈局是脫離文檔流的，在實際使用的過程當中得很好的處理浮動（清除浮動），若是處理很差會引起出一些問題，這是它的缺點；優勢是兼容性比較好
絕對定位：優勢：快捷，不容易出問題；缺點：因爲這個是脫離文檔流的致使後面的子元素也是脫離文檔流的，致使實用性不太好
flex佈局：css3新出的佈局方式，兼容性比較好，有效的解決以上兩個問題
table佈局：兼容性好，因爲ie8是不兼容flex佈局的，這時候可使用table佈局；缺點：歷史的詬病之外還有就是這三欄佈局只要有一欄超出了指定的高度，其餘兩欄也會隨之變高，在某些場景中這是不適用的
grid佈局：能夠作不少事情，代碼量相對來講會比較少
若是去掉高度已知，哪些就不適用了？
效果圖：