以下總結一下CSS中常見的布局方式。本人才疏學淺，如有錯誤，請留言指出。

如需轉載，請註明出處：CSS常見布局方式

目錄：

1. 使用BFC隱藏屬性

2. float + margin

3. absolute + margin

4. 聖杯布局

5. 雙飛翼布局

6. flex布局

以上5種方式都可以實現兩欄或三欄布局

如果對BFC(塊級格式化上下文)概念不熟悉的朋友，可以先看看這篇文章。BFC深入理解

使用BFC隱藏屬性

在對需要自適應的元素BFC化，可以實現兩欄或三欄布局

使用BFC實現三欄布局時需要注意的是DOM的書寫順序問題。如果將aside2與article交換位置，那麼aside2元素會被擠到article元素之下，無法實現三欄自適應布局。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄布局時會使元素出現掉下去的現象。

float + margin

在自適應寬度的元素上設置margin值，margin的值大於或等於固定寬度的值即可。實現思路與使用BFC隱藏屬性差不多。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄布局時會使元素出現掉下去的現象。

absolute + margin

使用absolute + margin實現兩欄布局時，只需要刪除對應的欄目即可。

聖杯布局

聖杯布局，為什麼叫聖杯布局...其實我覺得很奇怪，倒不如叫float + 負margin + relative更貼切一下。實現思路如下

1. 兩欄和自適應元素都設置同一方向的浮動(如float: left)

2. 父元素設置左右padding為左右邊欄的寬度。

3. 自適應元素設置寬度為100%

4. 左邊欄margin-left為負100%，再設置relative，最後通過left屬性偏移負的自身寬度。

5. 右邊欄margin-left為負自身寬度，再設置relative，最後通過right屬性偏移負的自身寬度。

當然了，缺點也是有的。就是在寬度小於兩欄寬度時，元素會因為寬度不足而掉下去。

雙飛翼布局

雙飛翼布局與聖杯布局相似。只不過少了relative與left, right的步驟和共同父元素，主內容元素多了層父元素。實現思路如下：

1. 兩欄和自適應元素都設置同一方向的浮動(如float: left)

2. main元素設置左右margin值，值為左右兩欄的寬度。main父元素設置寬度為100%

3. 左邊欄margin-left為負100%

4. 右邊欄margin-left為負自身寬度

flex布局

flex布局新出現的概念較多，有興趣的朋友可以到以下博客看更為詳細的教程。使用flex來實現布局，我個人認為是最簡單的方式。在移動端上，Android 4.4+以上、IOS 7.0+以上都支持flex布局。而在PC端上，使用flex布局時還是需要考慮一下的，因為到目前為止，IE11仍然只有部分屬性支持。

學IT，就來中公優就業：http://www.ujiuye.com/

更有海量免費乾貨：http://xue.ujiuye.com

500萬的就業基金等你拿：http://www.ujiuye.com/zt/jycj/?wt.bd=lsw41106sh

什麼？海量IT學習資料白給你都不要？別想了，加群搶：584539956

本文作者：unclekeith

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！