參考注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
參考注明來自https://www.zhihu.com/question/21504052
一、前言
在如今各個分辨率顯示器N足鼎立的時期，頁面采用流動性布局（亦可稱自適應布局）不失為一個好選擇。當然，具體實現不是那么容易，需要一定的css功力和實踐經驗。本文不講細節，只講外部的自適應架構，這也是實現整個頁面自適應的前提。目前為止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個：絕對定位法，margin負值法以及自身浮動法。這些方法簡潔實用，且無兼容性問題。如果您想在您的頁面上使用流動性布局，相信本文給您一些啟示的。
二、三種方法
為了演示的需要，首先限定下示例的布局結構：左中右三欄布局，左右兩欄寬度固定（要想不固定將寬度值改為百分值即可），中間欄寬度自適應。左右兩欄的寬度為200像素。
1、絕對定位法
這或許是三種方法里最直觀，最容易理解的：左右兩欄采用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。
此方法的優點是，理解容易，上手簡單，受內部元素影響而破壞布局的概率低，就是比較經得起折騰。
缺點在於：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。然而，一般情況下，除非用戶顯示器分辨率寬度>=1600像素，否則用戶不會把瀏覽器縮小到1000像素以下的，所以該缺陷危害指數3.
2、margin負值法
這種方法是在實際的網站中應用的最多的。主要分為雙飛翼布局(據考源自淘寶UED)和聖杯布局。
雙飛翼布局，中間的主體要使用雙層標簽。外層div寬度100%顯示，並且浮動（本例左浮動，下面所述依次為基礎），內層div為真正的主體內容，含有左右210像素的margin值。左欄與右欄都是采用margin負值定位的，左欄左浮動，margin-left為-100%，由於前面的div寬度100%與瀏覽器，所以這里的-100%margin值正好使左欄div定位到了頁面的左側；右側欄也是左浮動，其margin-left也是負值，大小為其本身的寬度即200像素。
聖杯布局 首先用一個外層div包裹主體和左右兩欄，外層div設置左右padding:210px,主體和左右兩欄左浮動，左欄與右欄都是采用margin負值定位的，左欄左浮動，margin-left為-100%，由於前面的div寬度100%與瀏覽器，所以這里的-100%margin值正好使左欄div定位到了主題的左側，再相對定位position:relative;left:-210px;將左欄移動到外層的padding區域，以保證不遮擋主體區域；右側欄也是左浮動，其margin-left也是負值，大小為其本身的寬度即200像素，同時也需要設置相對定位，position:relative;right:-210px;以保證不遮擋主體區域。
您需要注意幾個div的順序，無論是左浮動還是右浮動，先是主體部分div，這是肯定的，至於左右兩欄誰先誰后，都無所謂，我測試了IE6，Firefox，以及chrome瀏覽器，表現一致。
此方法的優點：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——布局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，代碼相對復雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。
3、自身浮動法
此方法代碼最簡單。應用了標簽浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放后面，就實現了自適應。
這里三個div標簽的順序的關鍵是要把主體div放在最后，左右兩欄div順序任意。
此方法的優點是：代碼足夠簡潔與高效
不足在於：中間主體存在克星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。