題目：假設高度已知，請寫出三欄佈局，其中左欄、右欄高度各為300px，中間自適應
Layouthtml *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
三欄佈局
浮動解決方案
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left:0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right:0;
width: 300px;
background: blue;
}
三欄佈局
絕對定位解決方案
.layout.flexbox{
margin-top: 110px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
三欄佈局
flexbox解決方案
.layout.table .left-center-right{
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
三欄佈局
表格佈局解決方案
.layout.grid .left-center-right{
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-center-right>div{
}
.layout.grid .left{
width: 300px;
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
三欄佈局
網格佈局解決方案
能寫出以上五種來，已經很優秀了，但是面試官可能會繼續追問以下問題：
1.這5種方案的優缺點是什麼？
（1）浮動方案
優點：兼容性好
缺點：在於需要清除浮動，浮動以後是脫離文檔流，如果處理不好會帶來很多問題，這是它本身的侷限性。
（2）絕對定位
優點：快捷
缺點：佈局已經脫離文檔流，意味著裡面所有的子元素也必須脫離文檔流，就導致了有效性/可使用性比較差
（3）flex佈局
優點：CSS3中用於解決上面兩個方案的不足出現的，比較完美的一個方案，移動端普遍使用
缺點：兼容性問題（IE8以上可用）
（4）table佈局
兼容性好（比flex好）例子中，中間內容多撐開後兩側容器也會自動增高（同時也是自身的不足，選擇哪個方案看具體的業務，沒有絕對的優缺點）
（5）網格grid佈局
一些CSS框架在做網格的事情，例如柵格系統，960px寬度設計12列，模擬網格控制每一部分的位置達到佈局的方式，在新出的網格佈局中，通過把它標準化也就是CSS開始支持，可以做很多複雜事情，同時代碼量簡化的多
2.如果把假設高度已知去掉，比如，中間部分的內容太多把容器撐高了，兩側的容器也要相應增高，這樣哪種方案就不適用了？
flex佈局和table佈局可以繼續使用，其它的不適用（兩側沒有自動增高）。
3.5種方案的兼容性如何？如果讓你真正去寫業務中的頁面佈局，那最優的方案是哪個？
答案可以參考第1題
此處總結優缺點是比較常見通用的話術，小夥伴們也可以自行查找並整理出來，如果有什麼問題歡迎留言一起討論噢~
