三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發十分常見，那麼什麼是三欄布局？比如我開啟某東的首頁：
映入眼簾的就是乙個常見的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。
下面圍繞的這樣的目的，即左右模組固定寬度，中間模組隨瀏覽器變化自適應，想要完成的最終效果如下圖所示：
紅色和藍色寬度固定，綠色寬度自適應，下面七種方法實現的最終效果跟這個差不多，可能會稍有不同。
下面七種技巧各有千秋，在開發中可以根據實際需求選擇適合自己的方法進行編碼。
1. 流體布局
左右模組各自向左右浮動，並設定中間模組的 margin 值使中間模組寬度自適應。
缺點就是主要內容無法最先載入，當頁面內容較多時會影響使用者體驗。
2. bfc 三欄布局
bfc 規則有這樣的描述：
bfc
區域，不會與浮動元素重疊。因此我們可以利用這一點來實現
3 列布局。
缺點跟方法一類似，主要內容模組無法最先載入，當頁面中內容較多時會影響使用者體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局。
3. 雙飛翼布局
利用的是浮動元素 margin 負值的應用，感興趣的同學可以上網搜搜原理。
主體內容可以優先載入，html **結構稍微複雜點。
4. 聖杯布局
跟雙飛翼布局很像，有一些細節上的區別，相對於雙飛翼布局來說，html 結構相對簡單，但是樣式定義就稍微複雜，也是優先載入內容主體。
5. flex 布局
簡單實用，未來的趨勢，需要考慮瀏覽器的相容性。
6. table 布局
缺點：無法設定欄間距
7. 絕對定位布局
簡單實用，並且主要內容可以優先載入。
CSS實現三欄布局 5種
常見的布局方式 float布局 position定位 table布局 彈性 flex 布局 網格 grid 布局 那麼我們就是用以上5種方式完成三欄布局，不過前提是左右寬度 假如左右寬度為300px 整個高度已知 假如高度為100px 中間寬度自適應 float最初的設計的初衷是為了解決文字環繞的問...
CSS實現三欄布局 5種
常見的布局方式 float布局 position定位 table布局 彈性 flex 布局 網格 grid 布局 那麼我們就是用以上5種方式完成三欄布局，不過前提是左右寬度 假如左右寬度為300px 整個高度已知 假如高度為100px 中間寬度自適應 float最初的設計的初衷是為了解決文字環繞的問...
三種方法實現CSS三欄布局
本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...