本文是學習中傳思客在慕課網開的課程《前端跳槽面試必備技巧》的學習筆記。課程地址：https://coding.imooc.com/class/evaluation/129.html#Anchor。
假設高度已知，請寫出三欄布局，左欄、右欄寬度300px，中間寬度自適應。
這道題本身的難度並不大，我們在布局頁面的時候，寫個三欄布局還是挺簡單的。但是如果在面試的時候遇到這道題，就沒有那么簡單了。看似簡單的一道題，想把它答好是不簡單的。往往越簡單的題越不好答。如果看到這題只想到了浮動和絕對定位，那這題你連及格都及格不了。
下面是5種三欄布局的方法。
在寫布局代碼之前，先寫兩段公共的樣式，此段寫在頭部。
樣式
<style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style>
1. 浮動布局
<!--浮動布局 --> <section class="layout float"> <style media="screen"> .layout.float .left{ float:left; width:300px; background: red; } .layout.float .center{ background: yellow; } .layout.float .right{ float:right; width:300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>浮動解決方案</h2> 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； </div> </article> </section>
浮動布局是有局限性的，浮動元素是脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如高度塌陷等。
浮動布局的優點就是比較簡單，兼容性也比較好。只要清除浮動做的好，是沒有什么問題的。
延伸：你知道哪些清除浮動的方案？每種方案的有什么優缺點?
2.絕對定位布局
<!-- 絕對布局 --> <section class="layout absolute"> <style> .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; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>絕對定位解決方案</h2> 1.這是三欄布局的絕對定位解決方案； 2.這是三欄布局的絕對定位解決方案; </div> <div class="right"></div> </article> </section>
絕對定位布局優點，很快捷，設置很方便，而且也不容易出問題，你可以很快的就能想出這種布局方式。
缺點就是，絕對定位是脫離文檔流的，意味着下面的所有子元素也會脫離文檔流，這就導致了這種方法的有效性和可使用性是比較差的。
3.flex布局
<!-- flexbox布局 --> <section class="layout flexbox"> <style> .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; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flexbox解決方案</h2> 1.這是三欄布局的felx解決方案； 2.這是三欄布局的flex解決方案； </div> <div class="right"></div> </article> </section>
felxbox布局是css3里新出的一個，它就是為了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的布局也都是用flexbox。
felxbox的缺點就是不能兼容IE8及以下瀏覽器。
4.表格布局
<!-- 表格布局 --> <section class="layout table"> <style> .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; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>表格布局解決方案</h2> 1.這是三欄布局的表格解決方案； 2.這是三欄布局的表格解決方案; </div> <div class="right"></div> </article> </section>
表格布局在歷史上遭到很多人的摒棄，說表格布局麻煩，操作比較繁瑣，其實這是一種誤解，在很多場景中，表格布局還是很適用的，比如這個三欄布局，用表格布局就輕易寫出來了。還有表格布局的兼容性很好，在flex布局不兼容的時候，可以嘗試表格布局。
表格布局也是有缺陷的，當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一起變高的，而有時候這種效果不是我們想要的。
5.網格布局
<!-- 網格布局 --> <section class="layout grid"> <style> .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; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>網格布局解決方案</h2> 1.這是三欄布局的網格布局解決方案； 2.這是三欄布局的網格布局解決方案; </div> <div class="right"></div> </article> </section>
網格布局也是新出的一種布局方式，如果你答出這種方式，也就證明了你的實力，證明你對技術熱點是有追求的，也說明你有很強的學習能力。
效果圖
這五種解決方案應該是最常見的三欄布局，如果你還有其他的方案，歡迎補充！
最后這個問題還有很多延伸問題的，比如，
- 高度已知換為高度未知呢？
- 塊內內容超出會是怎樣的效果？
- 如果是上下高度已知，中間自適應呢？
- 如果是兩欄布局呢？
- 如果是上下左右混合布局呢？
以上幾個延伸你能否輕松應對，如果絕對還有欠缺，盡早查缺補漏吧！
歡迎補充！