佈局：高度已知，佈局一個三欄佈局，左欄和右欄寬度爲200px，中間自適應

需求：高度已知爲200px，寫出三欄佈局，左欄和右欄各位200px，中間自適應，以下圖所示：css

方法一：float浮動佈局html

原理是：定義三個區塊，須要注意的是中間的區塊放在右邊區塊的下面，統一設置高度爲200px，而後設置左邊欄寬度爲200px而且float:left，設置右邊欄寬度爲200px而且float:rightcss3

優勢：兼容性比較好瀏覽器

缺點：float會脫離文檔流，須要處理float周邊的元素好比清除浮動佈局

浮動佈局的原理：查看浮動佈局詳解flex

<style> html *{ padding: 0; margin: 0;
    } .layout article div{ min-height: 200px;
    } .left{ width: 200px; float: left; background-color: red;
    } .right{ width: 200px; float: right; background-color: blue;
    } .center{ background-color: green;
    }
</style>
<body>
    <section class="layout float">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">浮動解決方案</div>
        </article>
    </section>
</body>

效果以下：拉動瀏覽器窗口的時候，中間寬度自動變化，左右邊欄不會變化flexbox

當center這個元素裏面的內容超過設置的這個高度，會出現以下這樣的問題url

解決辦法能夠在center中添加一個屬性：overflow: hidden;後效果以下：spa

因此當高度不肯定的時候，這種佈局方式不適用，左右兩邊的高度不會跟着變更.net

方法二：絕對定位佈局

實現原理：設置三個區塊分別左中右，而且統一設置高度爲200px和絕對定位，左邊欄left:0，右邊欄right:0,最重要的是中間的區塊，不設置寬度，而且設置left:200px,right:200px，這個定位的數值也就是左邊欄和右邊欄的寬度大小

優勢：快捷，不容易出問題

缺點：定位會脫離文檔流，那麼後面的元素也都是要脫離文檔流的，這個方式的可以使用性比較差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style> html *{ padding: 0; margin: 0;
    } .layout article div{ min-height: 200px; position: absolute;
    } .left{ width: 200px; left: 0; background-color: red;
    } .right{ right: 0; width: 200px; background-color: blue;
    } .center{ background-color: green; left: 200px; right: 200px;
    }
</style>
<body>
    <section class="layout absolute">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">絕對定位解決方案</div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

效果以下：拉動瀏覽器窗口的時候，中間寬度自動變化，左右邊欄不會變化

方法三：flexbox佈局方式

實現原理：首先定義三個區塊，分別爲左中右，而且統一設置高度爲200px，而後在這三個區塊的父元素中設置display:flex，設置左邊欄和右邊欄寬度爲200px,中間區塊設置flex:1

優勢：比較完美的一種方式，在移動端基本都是使用這個佈局方式，這是css3中的新的佈局方式，當設置最小高度後，中間區塊內容溢出時高度會自動撐開，左右兩邊的高度也能夠跟着撐開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style> html *{ padding: 0; margin: 0;
    } .layout.flexbox article div{ min-height: 200px;
    } .layout.flexbox .left-right-center{ display: flex;
    } .left{ width: 200px; background-color: red;
    } .right{ width: 200px; background-color: blue;
    } .center{ background-color: green; flex: 1;
    }
</style>
<body>
    <section class="layout flexbox">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">flexbox解決方案</div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

效果以下：拉動瀏覽器窗口的時候，中間寬度自動變化，左右邊欄不會變化

方法四：表格佈局方式

實現原理：定義三個區塊，而且統一設置高度爲200px和display:table-cell，而後左邊欄和右邊欄寬帶設置爲200px,中間區塊不設置寬度，最後須要在這三個區塊的父元素上設置width:100%和display:table

優勢：兼容性很是好，在IE8也是能夠的，彌補flexbox佈局在IE8下的不支持

缺點：當某個區塊高度不足的時候（固定高度），其餘區塊也跟着須要調整高度，但有這種需求就是其餘區塊不想跟着調整高度，這就是這個佈局的缺點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style> html *{ padding: 0; margin: 0;
    } .layout.table article div{ display: table-cell; height: 200px;
    } .layout.table .left-right-center{ display: table; width: 100%;
    } .left{ width: 200px; background-color: red;
    } .right{ width: 200px; background-color: blue;
    } .center{ background-color: green;
    }
</style>
<body>
    <section class="layout table">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">表格佈局解決方案</div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

方法五：網格佈局

實現原理：定義三個區塊分別爲左邊欄，中間區塊，右邊欄，而後再父元素上設置display:grid，grid-template-rows: 200px;（設置格子的高度），grid-template-columns: 200px auto 200px;（這裏表示有三列，第一列和第三列的寬度爲200px，第二列自動）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style> html *{ padding: 0; margin: 0;
    } .layout.grid .left-right-center{ width:100%; display: grid; grid-template-rows: 200px; grid-template-columns: 200px auto 200px;
    } .left{ background-color: red;
    } .right{ background-color: blue;
    } .center{ background-color: green;
    }
</style>
<body>
    <section class="layout grid">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">網格佈局解決方案</div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

效果以下：效果以下：拉動瀏覽器窗口的時候，中間寬度自動變化，左右邊欄不會變化

需求：若是高度不肯定，那麼上述的佈局方式哪一個還能夠適用

flexbox佈局和table佈局是能夠通用的，會自動增長高度（三個區塊都會自動增長高度）

網格佈局：高度不會自動增長，裏面的內容會溢出，但能夠不設置grid-template-rows: 200px;這個屬性的話，三列都會隨着內容而增高，而且能夠設置三個區塊的最小高度

<style> html *{ padding: 0; margin: 0;
    } .layout.grid .left-right-center{ width:100%; display: grid; min-height: 100px; grid-template-columns: 200px auto 200px;
    } .left{ background-color: red;
    } .right{ background-color: blue;
    } .center{ background-color: green;
    }
</style>
<body>
    <section class="layout grid">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <p>flexbox解決方案</p>
                <p>flexbox解決方案</p>
                <p>flexbox解決方案</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

</body>

浮動佈局：會出現下面這種狀況

由於浮動的原理，中間區塊的內容被區塊1擋住了，當內容超出之後，沒有了遮擋物，因此就出現了這種狀況，解決這種問題須要使用BFC（查看盒子模型和彈性盒子模型的詳解）

絕對定位：好比講center裏的內容增長，超太高度後這個區塊自動增長，可是其餘區塊是不會自動增長的