面試題之佈局解決方案
前端面試的時候關於佈局方面總是會問這樣一個問題—假設已知高度，完成三欄佈局，兩邊欄，定寬，中間欄自適應寬度。
對於這個問題，第一個想法就是利用浮動、定位來完成，但是對於面試題，只回答出來這兩種往往是不夠的。那麼仔細的思考一下會再想到利用表格佈局來實現，雖說表格佈局已經不怎麼採用，但是對於這個問題的解決還是很方便的。再一個解決方案就是利用flexbox。能答出來這四種解決方案已經是不錯了，但是為了體現出你對新技術的關注和追求，就需要答出第5種解決方案了，即利用網格佈局來實現。
那麼接下來我們就介紹這5中解決方案，以及簡單總結它們各自的優缺點。
1、利用浮動

    <style>
        .layout.float .left{
            float:left;
            width:300px;
            background-color:red;
        }
        .layout.float .right{
            float:right;
            width:300px;
            background-color:blue;
        }

        .layout.float .center {
            background-color
 
:orange;
        }
    </style>
    <section class="layout float">
        <!-- 利用浮動解決佈局時，center必須在最後。 -->
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"
 
>
                <h1>浮動佈局</h1>
                1.這是浮動佈局解決方案
                2.這是浮動佈局解決方案
            </div>
        </article>
    </section>

浮動的缺點是造成元素脫離文件流，如果處理不好，後邊的元素會塌陷，但是浮動的相容性比較好，並且容易實現，在處理好與周邊元素的關係的情況下，浮動還是很好的選擇，也是大部分情況下采用的方案。

2、利用絕對定位

<style type="text/css">
            .layout.absolute .left-center-right>div{
                position: absolute;
            }

            .layout.absolute  .left{
                left: 0;
                width: 300px;
                background-color: red;
            }

            .layout.absolute  .center {
                left: 300px;
                right: 300px;
                background-color: orange;
            }

            .layout.absolute  .right{
                right: 0;
                width: 300px;
                background-color: blue;
            }
        </style>
    <section class="layout absolute">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>絕對定位</h1>
                1.這是絕對定位佈局解決方案
                2.這是絕對定位佈局解決方案
            </div>
            <div class="right"></div>
        </article>
    </section>

絕對定位呢我們都知道，同浮動一樣也是會脫離文件流，而且，絕對定位最致命的就是以後的元素也必須脫離，在不是整個頁面都用定位的情況下還是不建議使用這個方案。

3、利用表格（table）

        <style type="text/css">
            .layout.table {
                width: 100%;
                display: table;
            }

            .layout .left-center-right>div {
                display: table-cell;
            }

            .layout .left{
                width: 300px;
                background-color: red;
            }

            .layout .center {
                background-color: orange;
            }

            .layout .right {
                width: 300px;
                background-color: blue;
            }
        </style>
    <section class="layout table">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>表格佈局</h1>
                1.這是表格佈局解決方案
                2.這是表格佈局解決方案
            </div>
            <div class="right"></div>
        </article>
    </section>

利用表格佈局，它的相容性可以說是非常好，老版本的瀏覽器也能支援。但是表格在有某一塊超出設定寬的時候，其他的兩塊都會隨著變化，一直保持著等高的狀態，除非設定高度，但是有些情況下我們是不需要等高的。

4、利用flexbox

        <style type="text/css">
            .layout .left-center-right{
                display: flex;
            }

            .layout .left {
                width: 300px;
                background-color: red;
            }

            .layout .center {
                /*flex 屬性用於指定彈性子元素如何分配空間*/
                flex: 1;
                background-color: orange;
            }

            .layout .right{
                width: 300px;
                background-color: blue;
            }
        </style>
    <section class="layout flexbox">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>flexbox</h1>
                1.這是flexbox佈局解決方案
                2.這是flexbox佈局解決方案
            </div>
            <div class="right"></div>
        </article>
    </section>

flexbox是一個相對來說完美的解決方法，但是相容性不是太強，畢竟是是css3的新型佈局模式，但是flexbox靈活多變可以使用不同尺寸的屏幕布局要求。

5、利用網格佈局(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 .left {
                background-color: red;
            }

            .layout .center {
                background-color: orange;
            }

            .layout .right {
                background-color: blue;
            }
        </style>
    <section class="layout grid">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>網格佈局</h1>
                1.這是網格佈局解決方案
                2.這是網格佈局解決方案
            </div>
            <div class="right"></div>
        </article>
    </section>

利用網格佈局可以說是目前最簡單的方案，僅僅4行程式碼就完成了這個效果。那麼什麼是網格佈局呢？對此我也是一知半解，就不做過多解釋，等深入的研究學習，有自己的理解後再來分享，不過可以給大家一個參考的地方，CSS Grid佈局：什麼是網格佈局

同樣的型別，比方說上中下三欄，上下固定高，中間欄自適應。這種也是很常見的佈局型別。還有兩欄的佈局，左邊固定寬，右邊自適應，反過來的情況，等等。希望大家能多思考，有自己的獨特的想法和觀點。
作者也只是一名前端小學生，不足以及錯誤之處，望各位看官多提出自己的意見，共同進步~