三欄式布局

左右兩邊固定寬度200px，中間自適應！

外層元素設定寬度未100%，利用 position : absolute; 使左右兩邊固定寬度200px、高度和位置，中間欄給定高度，寬度繼承自父元素100%，但左右margin值要給定大於200px的值！

優點：簡單實用，並且主要內容可以優先載入；主體三個div不分順序。

缺點：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。

外層元素設定為容器 display : flex; 左右兩欄設定不放大 flex-grow:0; 可縮放 flex-shrink:1 ，固定的 flex-basis:200px ,簡寫 flex:0 1 200px;；中間欄 flex:1 1 auto，可放大！

優點：簡單實用。

缺點：需要考慮瀏覽器的相容性，主體三個div一定要按照左中右順序。

左右欄給定寬度高度，並分別向左、向右浮動；中間欄給定margin值的左右距離大於200px，並給定高度（必須）。

優點：**簡潔高效。

缺點：主體三個div，中間欄必須放在最後；中間欄注意不能使用clear:both; ；主要內容無法最先載入，當頁面內容較多時會影響使用者體驗。

三欄全浮動，將左側欄設定 margin-left:-100%; ，將右側欄設定 margin-left:-200px; 把左右兩欄放到指定位置；中間欄的外層元素width:100% ，在巢狀乙個內層元素，設定主要內容的高度與左右間距（大於200px）。

優點：三欄相互關聯，具有一定抗性——布局不受內部影響；主要內容可以優先載入。

缺點：主體三個div，中間欄必須放在第一位上；理解困難；出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。

三欄全浮動，利用margin負值布局（類似於雙飛翼布局），把左右兩欄放到指定位置；在最外層容器上加樣式 margin:0 220px; 使整個布局向中間壓縮，再利用 position:relative; 使左右兩欄分別向左、向右移動定位，讓出中間欄被壓住的部分。

優點：與雙飛翼布局相似，三欄關聯，具有一定抗性；主要內容可以優先載入；相對於雙飛翼來說，html**相對簡單。

缺點：主體三個div，中間欄必須放在第一位上；樣式定義較為複雜；問題與雙飛翼布局相似。

左右欄給定寬度高度，並分別向左、向右浮動；並給左右兩欄分別設定右邊距、左邊距；中間欄給定高度，設定overflow:hidden; 。

優點：與流式布局相似，**簡潔高效。

缺點：主體三個div，中間欄必須放在最後；與流式布局相似，主要內容無法最先載入，當頁面內容較多時會影響使用者體驗。

將最外層容器 display:table; ，主體三個div均設定其 display:table-cell; ，分別設定左右欄的寬度高度即可。

優點：**簡單，容易理解。

缺點：主體三個div一定要按照左中右順序；無法設定欄間距（這裡要想設定欄間距，建議可以在中間欄外包一層div，外層div設定屬性 display:table-cell ，再設定內層的margin值與具體高度）