日常開發中，經常會用到css三欄布局，現將工作中常用的css 三欄布局整理如下：
什麼是三欄布局:
三欄布局，顧名思義就是兩邊固定，中間自適應。一、 float布局
float布局最簡單的三欄布局就是利用float進行布局
優勢：簡單
劣勢：中間部分最後載入，內容較多時影響體驗
二、bfc 規則
bfc 規則bfc(塊格式化上下文)規則規定：bfc不會和浮動元素重疊,將main元素設定為bfc元素即可
三、聖杯布局
聖杯布局聖杯布局的核心是左、中、右三欄都通過float進行浮動，然後通過負值margin進行調整
聖杯布局的核心是左、中、右三欄都通過float進行浮動，然後通過負值margin進行調整
四、雙飛翼布局
雙飛翼布局雙飛翼布局的前兩步和聖杯布局一樣，只是處理中間欄部分內容被遮擋問題的解決方案有所不同
既然main部分的內容會被遮擋，那麼就在main內部再加乙個content，通過設定其margin來避開遮擋
五、flex布局
flex布局flex布局是趨勢，利用flex實現三欄布局也很簡單，不過需要注意瀏覽器相容性
有幾點需要注意一下：
main要首先載入就必須寫在第一位，但因為left需要顯示在最左側，所以需要設定left的order為-1
flex屬性的完整寫法是：flex: flex-grow flex-shrink flex-basis 。這也是flex實現三欄布局的核心
main設定flex-grow為1，說明多餘空間全部給main，而空間不夠時，僅縮小left right部分
同時因為指定了left right部分的flex-basis，所以指定了兩者的寬度，保證其顯示效果
六、絕對定位
絕對定位絕對定位的方式也比較簡單，而且可以優先載入主體
CSS布局 三欄布局
題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...
CSS布局 三欄布局
css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。採用浮動實現的三欄布局有以下特點及注意事項 注意dom結構的排列順序。因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom 浮動 再...
CSS三欄布局
有這樣一種情況，在兩列布局的基礎上，將列的數量改為三欄。其中左右兩列的寬度固定，中間部分的寬度隨著瀏覽器寬度變化而變化。首先，我們還是介紹一下傳統的方法，就是利用了margin取負值的技巧。如下 三列布局 middle left right css 如下 margin left 1 margin l...