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 布局教程：语法篇