現在寫樣式各種 flex 有沒？不去相容ie家族相當的爽有沒？react vue angular 各種用，再也不用繁瑣的操作dom 有沒有？的確，隨著前端的發展，現在寫程式碼很少去相容那個噁心的ie 6 7 8 了，但是不免有些專案比如銀行政府等專案，後臺系統等還是要考慮ie 的相容，記得幾年前面試時候面試官很容易問的就是實現一個左側固定，右側自適應的佈局，或者讓你寫個聖盃佈局，雙飛翼布。剛開始聽到這兩個詞你會覺得很有意思，所以就再來溫習下著兩個。
聖盃佈局
html 結構
我們看下渲染的樣式
第一步
將 main left right 全部左浮動,container 設定overflow:hidden 出發BFC
第二步
設定main 的寬度為100%
.main{width:100%}
複製程式碼第三步
設定left和right負margin-left值
但是你會發現main 中的文字不見了，原因是被left 遮擋了，現在main 的內容區是100% 父元素寬的，怎麼讓main 不被遮擋呢？
第四步
解決中間欄被遮擋問題 給container 增加左右padding 同時把left 和 right 定位到相應位置
.container{padding:0 200px;}
複製程式碼.left{position:relative;left:-200px;}
.right{position:relative;right:-200px;}
複製程式碼到此，我們的聖盃佈局就完成了。
雙飛翼佈局
雙飛翼佈局和聖盃佈局的前3步都是一樣的，區別在於第四步（解決中間欄不被遮擋的問題），下面看下聖盃佈局的實現。
雙飛翼佈局的html 結構發生了一點變化
如圖，可以看到雙飛翼佈局把中間層又包了一層
.content{margin:0 200px;}
複製程式碼雙飛翼佈局沒有了container 的padding 和 left right 的定位，用一個content 層的左右margin 值來解決中間內容區被遮擋的問題。
總結
聖盃佈局和雙飛翼佈局都把中間列放到前面，實現了主要內容優先載入，並且都相容ie6以上。個人覺得雙飛翼佈局好一點，相信你在工作中肯定遇見過這樣的佈局，不知道你是怎麼實現的呢？本文如有不正確之處，歡迎留言指正。