三栏布局
三栏布局是页面中比较常见的布局方式，也有好几种实现方式，分别是flex布局，grid布局，float布局，position定位。
我们先假设左右两栏宽度为300px，中间宽度自适应，整体高度为100px。
1. float布局
这种方式的布局设计之初是为了解决文字环绕的问题，因为浮动后的元素会脱离文档流，使父元素的高度塌陷。
这里注意，使用float布局需要注意DOM结构，left、right需要在center的前面，如果是left-right-center的结构，会造成中间的div占位，会将右边的盒子顶下去。
<main>
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
</div>
</main>
<style>
div {
height: 200px;
}
.left{
float: left;
width: 173px;
}
.right {
float: right;
width: 170px;
}
.center {
margin-left: 100px;
margin-right: 100px;
}
.main::after {
conten: "";
display: block;
clear: both;
}
</style>
为中间的盒子添加margin值是为了防止中间内容过多时，内容会从左边盒子下方开始显示。最后不要忘了清除浮动，避免对下面的其他布局照成影响。
2. 绝对定位（position）布局
定位理解起来非常容易，就是指定元素边框相对于其正常位置应该出现的位置，或者说父元素、页面浏览器边框。轮播图就是一个典型的使用定位布局的例子。
position有五个值，分别是：
- static 默认值，参考文档流
- relative 相对定位，相对于其正常位置进行定位
- absolute 绝对定位，相对于static定位之外最近的一个父元素进行定位
- fixed 相对定位，相对于浏览器定位，不随页面的滚动而滚动
- inherit: 继承父元素的position属性值
知道了所有的属性及其代表的作用，我们就可以进行绝对定位的布局了，这里还有一个口诀叫做： “子绝父相”。相对定位是相对于原本位置进行定位，当位置发生偏移时，原位置留白。
<main>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</main>
<style>
.main {
position: relative;
}
.left {
position: absolute;
left: 100px;
}
.center {
position: abosolute;
right: 200px;
left: 200px;
}
.right {
position: absolute;
right: 100px;
}
</style>
3. flex布局
上述的方法都属于比较传统的布局方式，但有些布局结构实现起来并不方便，flex布局的出现，使页面布局变的更加灵活，简单，并且可以做到响应式布局。
flex的属性有很多，这里仅将用到的一些属性加以介绍。结构和上面的定位布局相同，这里就不赘述了。
将任意一容器指定为flex容器，包括行内元素（display: inline-flex）
<style>
.main {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left {
margin-left: 100px;
}
.right {
margin-right: 100px;
}
</style>
上述代码就是先将容器变成弹性容器，设置主轴排列方向为横向排列，最后定义主轴的排列方式为两端对齐。将左右两列分别左右margin100像素就可以实现一样的效果了。
4. grid布局
栅格布局就是将网页画成一个个的格子，是css布局中一种比较强大的布局方式，但是兼容性较低，因此使用的较为少数。
也是需要将容器变为栅格容器，然后划分行和列，将行划分为100px，一行。而列则是左右各300，中间部分居中显示。
.main {
display: grid;
gird-template-rows: 100px;
grid-template-colums: 300px auto 300px;
}
