聖盃佈局與雙飛翼佈局
聖盃佈局與雙飛翼佈局的共同點
- 三欄佈局；
- 主要內容寫在前面，最先載入，但佈局位於非最前
- 兩側定寬，分別位於中間主體兩側（外），中間流式（自動寬度）
佈局原理
- 三欄全部採用浮動（float: left）；
- HTML內容出現順序：main、left、right，要求首先載入主體（重要）內容，然後加載側邊欄；
- （左）負邊距（margin-left）超過元素自身寬度時（第二個浮動元素），即使父元素“容不下”2個浮動元素（第二個浮動元素會換行），第二個浮動元素也會移動到實際顯示位置相鄰的兄弟元素旁（父元素最右內側），並佔據一定空間，相當於“margin-left可以吃掉兄弟元素的margin”。當margin-left等於父元素寬度時，會移動到父元素最左側（內側）
聖盃佈局
HTML頁面代碼
那麼現在的要求是main位於中間，且適應容器寬度，left和right分別位於main兩側，三欄位於同一行。
但注意到main中內容已經被遮擋（默認text-align: left）。
聖盃佈局給出的思路是爲兩側設置相對定位（position: relative），同時爲父元素（container）設置兩側留白（padding），爲兩側留出空間，即可實現兩側與main分離。
聖盃佈局CSS代碼
效果如下圖
雙飛翼佈局
聖盃佈局使用了負邊距+相對定位方式，不添加任何額外HTML代碼，然而相對定位對性能有影響，考慮到實際應用情況，淘寶UED對此進行了優化，遺棄相對定位，具體做法是爲main添加額外的包裹標籤。
雙飛翼佈局HTML代碼
達到的效果與之前一致
浮動+負邊距佈局引申
我們要解決的問題是，主要內容先載入，也就是HTML代碼寫在前面，而顯示在頁面的中部（非最前面）。 既然負邊距可以將浮動元素上移，那麼我想就可以創造出這樣一種佈局方式：HTML代碼如下
CSS代碼如下
最終創建出3欄自適應寬度佈局，數值可自行調整，tip元素內容不可見，可用來提高Accessibility，效果如下
效果都是主要內容顯示在非最前位置，據此可創建出N列自適應佈局，不足的地方是最前面需要額外的但不可或缺的寬度100%的浮動元素。
然而創建多列布局的方式有很多，比如採用定位方式，BFC方式等，各有各的用途，帶來的思考纔是問題的意義。