1、絕對定位法
這或許是三種方法裡最直觀，最容易理解的：左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。
絕對定位法下的css**：
.left, .right
.left
.right
.content
絕對定位法的html**
class="container">
class="left">div>
class="right">div>
class="content">div>
div>
這裡的左中右三個div的順序是可以任意調整的，這與剩下的兩種方法就不一樣了，需要注意一下。
此方法的優點是，理解容易，上手簡單，受內部元素影響而破壞布局的概率低，就是比較經得起折騰。
缺點在於：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。然而，一般情況下，除非使用者顯示器解析度寬度》=1600畫素，否則使用者不會把瀏覽器縮小到1000畫素以下的，所以該缺陷危害指數3.
2、自身浮動法（流體布局）
此方法**最簡單。應用了標籤浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放後面，就實現了自適應。
css**如下：
自身浮動法css**
.container
.left
.right
.content
.clearfix:after
.clearfix
自身浮動法的html**
class="container">
class="left">div>
class="right">div>
class="content">div>
這裡三個div標籤的順序的關鍵是要把主體div放在最後，左右兩欄div順序任意。
此方法的優點是：**足夠簡潔與高效
不足在於：中間主體存在克星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。
3、margin負值法(雙飛翼布局)
這種方法是在實際的**中應用的最多的，我個人感覺多少有些跟風的嫌疑。此方法很難用一句話概括。首先，中間的主體要使用雙層標籤。外層div寬度100%顯示，並且浮動（本例左浮動，下面所述依次為基礎），內層div為真正的主體內容，含有左右210畫素的margin值。左欄與右欄都是採用margin負值定位的，左欄左浮動，margin-left為-100%，由於前面的div寬度100%與瀏覽器，所以這裡的-100%margin值正好使左欄div定位到了頁面的左側；右側欄也是左浮動，其margin-left也是負值，大小為其本身的寬度即200畫素。
見下面的css**：
margin負值定位方法的css**
.container
.container
.content
.left,.right
.left
.right
class="container">
class="content">div>
div>
class="left">div>
class="right">div>
您需要注意幾個div的順序，無論是左浮動還是右浮動，先是主體部分div，這是肯定的，至於左右兩欄誰先誰後，都無所謂，我測試了ie6，firefox，以及chrome瀏覽器，表現一致。
此方法的優點：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——布局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，**相對複雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。
優先載入主體
4、聖杯布局
lang="en">
.container
.main
.left
.right
style>
head>
class="container">
class="main">
div>
class="left">
div>
class="right">
div>
div>
body>
html>
5. flex 布局
lang="en">
.container
.main
.left
.right
style>
head>
class="container">
class="main">
div>
class="left">
div>
class="right">
div>
div>
body>
html>
bfc 規則有這樣的描述：bfc 區域，不會與浮動元素重疊。因此我們可以利用這一點來實現 3 列布局。
lang="en">
.left
.right
.main
style>
head>
class="container">
class="left">
div>
class="right">
div>
class="main">
div>
div>
body>
html>
三欄式布局
通常來說，三欄式最基本要解決的是左右兩側固定寬度，中間列自適應寬度，另外根據瀏覽器從上至下的渲染原理，通常中間欄才是最主要的內容，最好能在dom結構上將中間欄放在更前面 中間欄需要自適應寬度，自然想到塊級元素特性，但正因為這種獨佔一行的特性，只能將左右提前並且兩邊浮動，而中放最後做自適應寬度 另外就...
三欄式布局
真是坑壞我了.就因為html裡left,right,center的位置一直出錯 應該是left,right,center我寫成了left,center，right 團隊名稱 課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去...
三欄式布局
三欄式布局 左右兩欄寬度固定 如果想寬度不固定，將寬度值改為百分值 中間欄寬度自適應 三欄式布局大體上分為四種 自身浮動法 絕對定位法 margin負值法 flex布局法 三欄式布局詳細分為五種方法 float margin position margin float 負margin 聖杯布局 fl...