三欄式布局：左右兩欄寬度固定（如果想寬度不固定，將寬度值改為百分值），中間欄寬度自適應
三欄式布局大體上分為四種：自身浮動法、絕對定位法、margin負值法、flex布局法
三欄式布局詳細分為五種方法：
float+margin
position+margin
float+負margin(聖杯布局)
float+負margin(雙飛翼布局)
flex布局（這裡暫時不做介紹）
1、float+margin
原理：左右兩欄分別向左向右浮動，中間欄通過外邊距給左右兩欄騰出空間，中間欄的寬度根據瀏覽器視窗自適應
.left
.right
.left,.right
.middle
left
right
middle
注：書寫順序：先寫左右兩欄（左右兩欄順序可以變換），再寫中間欄（也就是主題欄）
缺點是：先渲染了側邊欄，而不是主題欄。
2、position+margin
原理：通過絕對定位將左右兩欄固定，中間欄通過外邊距給左右兩欄騰出空間，中間欄的寬度根據瀏覽器視窗自適應
.left
.right
.left,.right
.middle
left
middle
right
注：如果中間欄含有最小寬度限制或是含有寬度的內部元素，則瀏覽器串列埠小到一定程度，主面板與中間欄會發生重疊。
3、float+負margin(聖杯布局)
.middle
.left
.right
.wrap
middle
left
right
三者都向左浮動
設定middle寬度100%，設定左右兩欄的寬度
left設定負左邊距為100%，right設定負左邊距為負的自身寬度
設定middle的padding值給左右兩個面板留出空間設定左右兩個面板為相對定位，left的left值為負的left寬度，right的right值為負的right寬度。
注：主面板部分優先渲染，當面板的middle部分比左右兩邊的子面板寬度小的時候，布局就會亂掉。可以通過設定middle的min-width屬性或使用雙飛翼布局避免問題。
4、雙飛翼布局（float+負margin）
.wrap
.left
.right
.middle
middle
left
right
三者都設定左浮動
設定wrap寬度為100%，設定左右兩個的寬度
left設定負左邊距為100%，right設定負左邊距為負的自身寬度
設定middle的margin值給兩個子面板留出空間。
注：主面板部分優先渲染，聖杯採用的是padding,而雙飛翼採用的是margin，解決了聖杯布局middle的最小寬度不能小於左側欄的缺點。
原版文章：
三欄式布局
通常來說，三欄式最基本要解決的是左右兩側固定寬度，中間列自適應寬度，另外根據瀏覽器從上至下的渲染原理，通常中間欄才是最主要的內容，最好能在dom結構上將中間欄放在更前面 中間欄需要自適應寬度，自然想到塊級元素特性，但正因為這種獨佔一行的特性，只能將左右提前並且兩邊浮動，而中放最後做自適應寬度 另外就...
三欄式布局
真是坑壞我了.就因為html裡left,right,center的位置一直出錯 應該是left,right,center我寫成了left,center，right 團隊名稱 課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去...
三欄式布局
1 絕對定位法 這或許是三種方法裡最直觀，最容易理解的 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。絕對定位法下的css left,right left right content html 為 絕對定位法的html class...