CSS響應式佈局--三欄佈局例項演示及優缺點詳解
學前端的小夥伴們都知道，CSS學起來很容易，但是要學精通了卻特別難。在前端市場需求火熱的今天，競爭相當激烈，光是會使用或者一兩種實現的方式是遠遠不夠的。不僅如此，還要深知各種解決方案的優劣，對各種特性瞭如指掌。
本次介紹的內容是CSS響應式佈局--三欄佈局
這是一道前端面試有關css內容的常考題。一般上來就會問：
請你實現一下三欄佈局：
一般的同學只是想到了一兩種比如 float、absolute，但是光是拿這些來回答面試官的問題是遠遠不夠的。
現在請跟本問來過一遍這道問題：
實現三欄佈局一般能想到5種佈局方案：
1. float
2. absolute
3. flexbox
4. table
5. grid
首先設定下全域性的樣式：
<style>
*, html {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
color: #ffffff;
}
</style>下面是例項演示部分：
一、float佈局
思路：
左右div一個左浮動，一個右浮動，固定寬度，中間就能自適應寬度了。
中間那欄div，是個塊級元素，在不設寬度的前提下，會自動佔滿頁面一整行。
由於左右div都設定了float，所以他們都會脫離文件流。也就是說，float元素在其父級article元素內不佔據空間。
實際佔據整個空間的是中間的div，而左右div則懸浮於中間div的上方，所以視覺上看起來左右div像是佔據了左右兩邊欄。
浮動元素雖然脫離文件流，不受父級元素控制、不影響其它非浮動子元素的佈局，但是它會對子元素的文字內容造成影響，其效
果也就是我們平常使用的word中的文字環繞效果。
<section class="layout float"> <style media="screen"> .layout.float .left { float: left; width: 300px; background: #cecece; } .layout.float .right { float: right; width: 300px; background: #00a8fe; } .layout.float .center { background: yellowgreen; } </style> <article> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>Float Layout</h1> <p>很多文字</p> <p>很多文字</p> <p>很多文字</p> </div> </article> </section>
實際效果：
問題：
1. 為什麼三個div是左、右、中這樣排列？
如果是按照左中右排列的話，效果會變成這樣。右邊那列換到了下一行顯示。
原因在於浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於中間div先於右div渲染，之後的塊級元素都會另起一行顯示，所以右div會在下一行右浮動。
所以，為了解決此問題，先讓左右div先浮動，頂格顯示，然後再顯示中間的div即可。
2. 清除浮動問題
此問題會在清除浮動一文中詳細解答。
優點：由於float佈局很早就被廣泛使用，所以相容性比較好
缺點：需要清除浮動。
二、absolute佈局
思路：article下的左中右三個div都設定position為absolute, 左右div定寬，left:0, right:0。中間div設定left和right各位左右
div的寬度。
absolute為絕對定位，如果子元素position為absolute，那麼它會相對於對其position為relative或者absolute的父級元素進行
定位，如果父級元素都滿足不了要求，最終會相對於整個瀏覽器視窗進行定位。
<section class="layout absolute">
<style>
.layout.absolute article div {
min-height: 100px;
position: absolute;
}
.layout.absolute .left {
width: 300px;
left: 0;
background: #CECECE;
}
.layout.absolute .right {
width: 300px;
right: 0;
background: #9ACD32;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Absolute Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>
優點：使用快捷
缺點：可實用性不高，因為如果佈局內部子元素多而且很複雜時，其內部佈局需要涉及的相對計算比較多，導致其內部子元素也
需要設定為absolute，脫離了文件流。使整個頁面佈局，除錯起來非常困難。
三、 flexbox佈局
思路：article元素設定display為flex，其子元素左右div均為定寬，中間設定flex為1.
flexbox會將內部子元素（如果不設定寬高），根據其所佔比例（flex: 1）自動計運算元元素的尺寸，均勻排列
<section class="layout flex">
<style>
.layout.flex article {
display: flex;
}
.layout.flex .left {
width: 300px;
background: #CECECE;
}
.layout.flex .right {
width: 300px;
background: #9ACD32;
}
.layout.flex .center {
flex: 1;
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Flex Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>效果：
優點：解決了上述兩種佈局的問題，實現了佈局優化，所用於移動端
缺點：版本比較多，需要做相容性處理
四、table佈局
思路: table佈局比較簡單，這裡只要設一行三列即可。整個table100%寬，左右兩列定寬，中間自適應。
ps：這裡換成table、tr、td元素效果相同
<section class="layout table">
<style>
.layout.table {
margin-top: 10px;
}
.layout.table article {
display: table;
width: 100%;
height: 100px;
}
.layout.table div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: #CECECE;
}
.layout.table .right {
width: 300px;
background: #9ACD32;
}
.layout.table .center {
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Table Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>效果：
優點： 相容性好，使用方便。
缺點： 其中一個 單元格高度變化，旁邊也會隨之高度變化。換句話說，不能自定義某一欄的高度，所有的單元格必須等高。
五、grid佈局
思路：grid佈局是css3新出的一種佈局，常用於報刊雜誌那種多欄目佈局。通過對父元素article設定display: grid
再設定 grid-template-columns 及grid-template-rows即可。非常便捷。
<section class="layout grid">
<style>
.layout.grid {
margin-top: 10px;
}
.layout.grid article {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
}
.layout.grid .left {
background: #CECECE;
}
.layout.grid .right {
background: #9ACD32;
}
.layout.grid .center {
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Grid Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>效果：
優點：編寫方便
缺點：由於是比較新，相容性會是一個問題，比如ie10之前的版本不支援
以上就是三欄佈局的五種寫法，如果有疑問，請在下方留言。