css常見布局方式

CSS常見布局方式

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

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

目錄：

1. 使用BFC隱藏屬性
2. float + margin
3. absolute + margin
4. 聖杯布局
5. 雙飛翼布局
6. flex布局

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

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

使用BFC隱藏屬性

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

兩欄布局
<aside class="aside1"></aside>
<article class="main"></article>

// 左邊固定寬度，右邊自適應
.aside1 {
  float: left;
  margin-right: 10px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  overflow: hidden;
  height: 100vh;
  background-color: lightpink;
}

如果要讓兩欄之間有空隙，可以給浮動元素設置margin-right值，也可以給自適應的主內容設置margin-left值。但設置margin-left時，需要考慮到aside的寬度。實現三欄布局也是如此，給浮動元素設置margin值會方便一些。

三欄布局
// 這里要注意DOM的書寫順序問題。
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>

// 固定寬度
.aside1 {
  float: left;
  margin-right: 10px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
// 固定寬度
.aside2 {
  float: right;
  margin-left: 10px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
// BFC化自適應寬度
.main {
  overflow: hidden;
  height: 100vh;
  background-color: lightpink;
}

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

float + margin

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

兩欄布局
<aside class="aside1"></aside>
<article class="main"></article>

.aside1 {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  margin-left: 110px;
  height: 100vh;
  background-color: lightpink;
}

三欄布局
// 注意，DOM順序不可改變
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>

.aside1 {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

.main {
  margin-left: 110px;
  margin-right: 110px;
  height: 100vh;
  background-color: lightpink;
}

.aside2 {
  float: right;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

absolute + margin

// 使用position: absolute時，DOM元素順序並不重要。給左右兩欄定寬，主內容自適應寬度。缺點：側邊欄元素脫離文檔流。優點：article元素可先加載。
<article class="main"></article>
<aside class="aside1"></aside>
<aside class="aside2"></aside>

.aside1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.aside2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  margin: 0 110px;
  height: 100vh;
  background-color: lightpink;
}

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

聖杯布局

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

1. 兩欄和自適應元素都設置同一方向的浮動(如float: left)
2. 父元素設置左右padding為左右邊欄的寬度。
3. 自適應元素設置寬度為100%
4. 左邊欄margin-left為負100%，再設置relative，最后通過left屬性偏移負的自身寬度。
5. 右邊欄margin-left為負自身寬度，再設置relative，最后通過right屬性偏移負的自身寬度。

// 與其他布局不同，此布局需要父元素
<div class="parent">
  <article class="main"></article>
  <aside class="aside1"></aside>
  <aside class="aside2"></aside>
</div>

.parent {
  padding: 0 100px;
  // 左右邊欄的寬度，可適當縮小以增加每欄之間的距離
}
.main {
  float: left;
  width: 100%;
  height: 100vh;
  background-color: lightpink;
}
.aside1 {
  float: left;
  position: relative;
  left: -100px;
  margin-left: -100%;
  width: 100px;
  height: 100vh;
  background-color: lightseagreen;
}
.aside2 {
  float: left;
  margin-left: -100px;
  position: relative;
  right: -100px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

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

雙飛翼布局

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

1. 兩欄和自適應元素都設置同一方向的浮動(如float: left)
2. main元素設置左右margin值，值為左右兩欄的寬度。main父元素設置寬度為100%
3. 左邊欄margin-left為負100%
4. 右邊欄margin-left為負自身寬度

<div class="main-wrap">
  <article class="main"></article>
</div>
<aside class="aside1"></aside>
<aside class="aside2"></aside>

// 以下包含部分sass語法
.main {
  margin: 0 100px;
  height: 100vh;
  background-color: lightpink;
  &-wrap {
    float: left;
    width: 100%;
  }
}
.aside1 {
  float: left;
  width: 100px;
  margin-left: -100%;
  height: 100vh;
  background-color: lightseagreen;
}
.aside2 {
  float: left;
  width: 100px;
  margin-left: -100px;
  height: 100vh;
  background-color: lightsalmon;
}

flex布局

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

Flex 布局教程：語法篇