https://zhuanlan.zhihu.com/p/25070186?refer=learncoding
三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。
左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。
1. 流體布局
.left{float:left;height:200px;width:100px;backgroundcolor:red;}
.right{width:200px;height:200px;background-color:blue;float:right;}
.main{margin-left:120px;margin-right:220px;height:200px;background-color:green;}
<divclass="container"><divclass="left"></div><divclass="right"></div><divclass="main"></div></div>
左右模塊各自向左右浮動，并設(shè)置中間模塊的 margin 值，中間模塊寬度自適應(yīng)。
缺點就是主要內(nèi)容無法最先加載，當(dāng)頁面內(nèi)容較多時會影響用戶體驗。
2. BFC 三欄布局
BFC 規(guī)則有這樣的描述：BFC 區(qū)域，不會與浮動元素重疊。因此我們可以利用這一點來實現(xiàn) 3 列布局。
.left{float:left;height:200px;width:100px;margin-right:20px;background-color:red;}
.right{width:200px;height:200px;float:right;margin-left:20px;background-color:blue;}
.main{height:200px;overflow:hidden;background-color:green;}
<divclass="container"><divclass="left"></div><divclass="right"></div><divclass="main"></div></div>
缺點跟方法一類似，主要內(nèi)容模塊無法最先加載，當(dāng)頁面中內(nèi)容較多時會影響用戶體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局。
3. 雙飛翼布局
.content{float:left;width:100%;}
.main{height:200px;margin-left:110px;margin-right:220px;background-color:green;}
.left{float:left;height:200px;width:100px;margin-left:-100%;background-color:red;}
.right{width:200px;height:200px;float:right;margin-left:-200px;background-color:blue;}<divclass="content"><divclass="main"></div></div><divclass="left"></div><divclass="right"></div>
利用的是浮動元素 margin 負(fù)值的應(yīng)用，感興趣的同學(xué)可以上網(wǎng)搜搜原理。
主體內(nèi)容可以優(yōu)先加載，HTML 代碼結(jié)構(gòu)稍微復(fù)雜點。
4. 圣杯布局
.container{margin-left:120px;margin-right:220px;}
.main{float:left;width:100%;height:300px;background-color:red;}
.left{float:left;width:100px;height:300px;margin-left:-100%;position:relative;left:-120px;background-color:blue;}
.right{float:left;width:200px;height:300px;margin-left:-200px;position:relative;right:-220px;background-color:green;}
<divclass="container"><divclass="main"></div><divclass="left"></div><divclass="right"></div></div>
跟雙飛翼布局很像，有一些細(xì)節(jié)上的區(qū)別，相對于雙飛翼布局來說，HTML 結(jié)構(gòu)相對簡單，但是樣式定義就稍微復(fù)雜，也是優(yōu)先加載內(nèi)容主體。
5. Flex 布局
<!DOCTYPE html><htmllang="en"><head><style>.container{display:flex;}.main{flex-grow:1;height:300px;background-color:red;}.left{order:-1;flex:01200px;margin-right:20px;height:300px;background-color:blue;}.right{flex:01100px;margin-left:20px;height:300px;background-color:green;}</style></head><body><divclass="container"><divclass="main"></div><divclass="left"></div><divclass="right"></div></div></body></html>
簡單實用，未來的趨勢，需要考慮瀏覽器的兼容性。
6. Table 布局
<!DOCTYPE html><htmllang="en"><head><style>.container{display:table;width:100%;}.left,.main,.right{display:table-cell;}.left{width:200px;height:300px;background-color:red;}.main{background-color:blue;}.right{width:100px;height:300px;background-color:green;}</style></head><body><divclass="container"><divclass="left"></div><divclass="main"></div><divclass="right"></div></div></body></html>
缺點：無法設(shè)置欄間距
7. 絕對定位布局
<!DOCTYPE html><htmllang="en"><head><style>.container{position:relative;}.main{height:400px;margin:0120px;background-color:green;}.left{position:absolute;width:100px;height:300px;left:0;top:0;background-color:red;}.right{position:absolute;width:100px;height:300px;background-color:blue;right:0;top:0;}</style></head><body><divclass="container"><divclass="main"></div><divclass="left"></div><divclass="right"></div></div></body></html>
簡單實用，并且主要內(nèi)容可以優(yōu)先加載。
