一、简介
网页布局对于一个前端开发者而言至关重要，掌握好布局知识有助于我们更好的实现CSS界面的设计和开发。布局是有限空间内的元素排列方式，因为页面设计横向不滚动，纵向无限延伸，所以大多数时候讨论的布局都是对水平方向进行分割。常用的布局方式为单列布局、两列布局、三列布局、粘连布局等。
二、单列布局
单列表布局是将一个元素作为布局容器，通常设置一个较小的(最大)宽度来保证不同像素宽度屏幕下显示一致。
头部
单列布局
单列布局的优势在于基本上可以适配超过布局容器宽度的各种显示屏幕，可以保证在超过设置的最大宽度的屏幕上浏览网站看到的效果是一致的。而它的缺点就是屏幕空间的浪费，在屏幕空间足够大的情况下，页面两侧显示了大量空白，如果屏幕特别大，两侧空白的区域可能会比页面内容更宽。
二、两列布局
两列布局就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。这种布局适用于内容上具有明显主次关系的网页。
① float + margin方式
通过让左侧浮动，然后给右侧设置一个margin-left，值为左侧元素的宽度即可。
左侧定宽
右侧自适应
② 绝对定位
首先给父容器设置一个相对定位，然后给左侧元素设置一个绝对定位，给右侧也设置一个绝对定位，left值为左侧元素的宽度，right值为0，即可。
③ Float + BFC
所谓BFC就是Block fomatting context(块级格式化上下文)，对于BFC盒子而言，其拥有一个独立的布局环境，BFC容器里面的子元素不会影响到外面的元素，反之亦是如此。
BFC容器相对于普通的盒子而言，有一些特性:
a. 在同一个文档流中，BFC的区域不会与float box重叠。
b. 为了不影响BFC容器外元素的布局，计算BFC的高度时，浮动元素也会参与计算。
如何让一个普通的盒子变成BFC容器？
- float的值不是none。
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
④ Flex实现
主要就是给父容器设置成flex布局容器，然后给右侧设置flex为1即可让右侧变成自适应。
三、三列布局
三列布局按照左中右的顺序进行排列，通常中间列最宽(自适应)，左右两列次之。三列布局相对复杂些，我们会按步骤一步一步实现，如:
① 圣杯布局
圣杯布局
left
right
所谓圣杯布局，就是根据左右两侧元素的宽度，给父容器元素设置一个左右内边距，为了方便记忆，我们可以理解成一开始父容器内是方形填满的，给父容器添加左右内边距，我们可以想象成将圣杯压缩成形的过程。
因为目前左右两部分都在内容的垂直排列，所以接下来需要给左中右三部分都添加一个左浮动，让三个元素水平排在一起，需要注意的是三个元素进行左浮动之后，左右两个元素仍然在中间元素的下面，因为中间元素设置的宽度是100%，所以中间元素会占满父元素，由于宽度无法容下左右两块元素，所以左右两块元素会换行排列在一起，如:
此时左中右三个元素可以看做是水平排列在一起的，我们可以通过给左右两块元素设置一个负的margin-left即可让左右两块元素向左边移动。左侧元素需要到最左边去，故其margin-left值为-100%，即中间元素的宽度，右侧元素需要到最右边去，故其margin-left值为负的右侧元素自身宽度。
此时已经可以看到左中右三个元素水平排列在一起，并且左侧元素在最左边，右侧元素在最右边，但是左侧元素其实应该是要在左侧黄色区域中，右侧元素应该在右侧黄色区域中才对，所以我们需要给左右两个元素一个相对定位。左侧元素再向左移动自身宽度的距离，故其left值为负的左侧元素自身宽度，右侧元素需要右侧移动自身宽度的距离，故其right值为负的右侧元素自身宽度。
而要想解决这个问题，我们就需要给容器设置一个最小宽度，这个最小宽度值怎么定呢？左侧元素要想不换行显示，那么容器的宽度必须能够容纳左侧元素的大小，所以容器内容区的最小值为左侧元素的宽度。
.container {
min-width: 150px; /*给容器设置一个最小宽度，值为左侧元素的宽度，防止换行显示*/
}完整样式为:
② 双飞翼布局
双飞翼布局
left
right
所谓双飞翼布局，就是给中间元素包裹一层div盒子，然后根据左右两侧元素的宽度，给中间内容元素设置一个左右外边距，为了方便记忆，我们可以理解成，给中间添加左右外边距，就像给中间元素加装了一双翅膀，从而形成双飞翼布局。
同样的，需要给左中右三部分都添加一个左浮动，让三个元素水平排在一起，如:
同样的，需要给左侧添加一个负的margin-left，值为-100%，给右侧添加一个负的margin-left，值为负的右侧元素自身宽度大小。
由于之前中间元素已经设置好了左右外边距给左右两个元素留出了位置，所以添加margin-left之后就已经实现了。
同样的为了防止容器宽度太小导致左右两个元素换行显示，需要设置一个最小宽度。
.container {
min-width: 400px; /*给容器设置一个最小宽度，值为左侧元素的宽度，防止换行显示*/
}完整样式如下:
③ Flex实现三列布局
Flex实现三列布局相对简单些，就是将父容器设置为flex容器，中间元素设置flex值为1，让其自适应剩余宽度，将左右元素设置为禁止缩小，即flex-shrink值设置为0.
left
flex三列布局
right
四、sticky footer粘连布局
所谓粘连布局，就是将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定(但有一个最小高度为浏览器高度)，当页面高度小于浏览器高度时，下部分应固定在屏幕底部，当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。
① margin-top + padding-bottom实现
首先布局上将footer部分放到container容器下面，header和main放到container容器的中。
header
Sticky Footer粘连布局
目前由于container容器设置了min-height为100%，所以footer部分会被挤压到浏览器底部的下面。接下来我们就需要让footer部分上移到浏览器的底部，可以通过给footer设置一个margin-top，值为负的footer自身高度。
.footer {
margin-top: -100px; /*让footer上移到浏览器的底部*/
}
之所以出现这种情况，是因为footer通过margin-top上移后只是覆盖在了container上面，所以需要给container容器设置一个padding-bottom，将container容器的内容区上移。
* {
box-sizing: border-box; /*将所有元素都定义成border-box边框盒模型，非常重要*/
}
.container {
padding-bottom: 100px; /*将container的内容区向上移动footer高度的距离*/
}需要注意的是，我们给container容器添加padding-bottom之后，为不影响整个container容器的高度，需要将container容器设置成边框盒模型。
完整样式代码如下:
② 通过flex布局实现
布局上有所不同，会将header、main和footer都放到container容器的中，并将container容器设置为flex布局，给container容器设置一个最小高度为浏览器高度即100%，然后给中间部分设置flex值为1，自适应将footer撑开到浏览器底部，等中间内容过多的时候就会将footer往下推。
header
Sticky Footer粘连布局