目录
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。
大致写了五种方式实现，前三种无法达到重要内容优先显示的效果，而后面两个可以：
最左侧一栏 left 宽度为300px，最右侧一栏 right 宽度为200px
1、利用浮动
原理：浮动元素脱离文档流
HTML 结构
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>CSS 样式
.left {
float: left;
width: 300px;
height: 400px;
background-color: limegreen;
}
.right {
float: right;
width: 200px;
height: 400px;
background-color: yellowgreen;
}
.center {
height: 400px;
margin: 0 200px 0 300px;
background-color: tomato;
}2、利用绝对定位
思想基本和float相同，就是设置的值不同，在float中设置的是float-left和float-right，而这其中设置的是left和right
原理：绝对定位元素脱离文档流
HTML 结构同上
CSS 样式
.wrapper {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 500px;
background-color: lightgreen;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 500px;
background-color: lightskyblue;
}
.center {
height: 500px;
margin: 0 200px 0 300px;
background-color: tomato;
}3、利用 flex 布局
原理：利用了容器项目 order 属性的特点
HTML 结构
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>CSS 样式
.wrapper {
display: flex;
height: 500px;
}
.center {
order: 1; /* 默认值为0，order越小位置越靠前，越靠上，此时就不用考虑覆盖的问题了*/
flex-grow: 1;
/* flex-grow : 默认值为0，为0时有剩余空间也不放大，子元素该属性均为1时，剩余空间被所有为1的子元素均分，有一个子元素该属性为2时，该元素将分得或者努力分得其他为1的子元素所分得空间2倍大小的空间 */
/* flex-shrink : 默认值为1，当子元素中存在某个元素该属性为0时，若空间不足，则为1的缩小，为0的不变，因此可以猜测，为2的弱小的应该是更多，应该是缩小了为1缩小的空间的两倍 */
background-color: tomato;
}
.left {
width: 300px;
height: 500px;
background-color: lightgreen;
}
.right {
order: 2;
width: 200px;
height: 500px;
background-color: lightskyblue;
}4、圣杯布局：
圣杯布局其实也是三栏布局，只不过是中间内容优先显示而已
实现思路：
1）在 wrapper 中的三列 center、left 和 rigth 分别设置左浮动（没错，都是左浮动哈，先大致理解一下，下面会解释）和相对定位
left 和 right 的宽分别为 300px 和 200px，center 宽度为 100%
（center的总宽度是100%，也就等于父元素的container的宽度。container的宽度会通过设置padding值减去left的300px和right的200px）
2）因为浮动和width：100％的关系 center 会占满整个 wrapper，left 和 right 会被挤到它下面
3）对 left 设置 margin-left：-100%，让其回到上一行的左侧
（当给margin-left设置负值时，可以理解为当前元素左边框距离父元素container最右侧的宽度，100%则是相对于父元素的container来说的（标准盒模型的width＝container的宽度），那么这个-100%的效果就是让left的左边框和父元素container的最左边相邻）
4）此时会将 center 的左边一部分遮住，所以需要给父元素wrapper 设置 padding: 0 200px 0 300px，给left 空出位置
（left的宽度是 300嘛，自然需要给左内边距300px，来将wrapper的container缩小，借此来使center的宽度缩小【center容器宽度的100%表示与父元素的container宽度相同，并不包含padding，因此我们在设置padding时，会将父元素的container宽度变小，自然center宽度也就变小了】，右内边距同理 ）
5）这时会发现 left 还没有在左侧
（margin-left是相对于父元素的container的，父元素有了左内边距，自然container左侧就多了300px的宽度，这时left也有跟随container距离父元素左边框有了300px的宽度，既然left距离左边框300px，给它个-300px就好了）
此时需要通过之前设置好的相对定位，然后给 left：-300px 使其回到最左边
6）同样的道理，对 right 也设置 margin-left：-200px，将 right 也拉回第一行
（理由相同嘛，首先需要让right的最左侧距离"wrapper的container最右侧"right自身的宽度，以达到避免被挤到下一行的遭遇，在此之前，我们已经考虑到certer会被left、right覆盖，于是对wrapper设置了padding【为什么要对wrapper设置padding前面已经详细讲过了】，右内边距是200px，所以我们在设置了margin-left: -200px之后，其实left的最右侧是挨着wrapper的container的最右侧的，右部还有200px的padding，我们需要让right的右侧挨着wrapper的最右侧，就需要让其再向右移动200px ）
7）这时再对其设置 right：-200px;
HTML 结构
<div class="wrapper">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>CSS 样式
.wrapper {
height: 500px;
padding: 0 200px 0 300px; /* wrapper的container两侧空出来left和right的宽度 */
}
.center, .left, .right {
position: relative;
float: left;
}
.center {
width: 100%; /* 宽度＝wrapper的container的宽度，两侧已空出left和right */
height: 500px;
background-color: tomato;
}
.left {
width: 300px;
height: 500px;
margin-left: -100%; /* 左侧紧邻container左侧 */
left: -300px; /* 移至左侧紧邻wrapper最左侧，右侧紧邻container左侧 */
background-color: lightgreen;
}
.right {
width: 200px;
height: 500px;
margin-left: -200px; /* 右侧紧邻container右侧 */
right: -200px; /* 移至右侧紧邻wrapper最右侧 */
background-color: lightskyblue;
}
5、双飞翼布局：
双飞翼布局其实和圣杯布局类似，都是为了实现三栏布局，且中间内容部分优先展示
不同点就是圣杯布局利用的是 wrapper 的 padding 来保留左右位置的，而双飞翼布局利用的是给中间部分（center）的 margin 来实现的，因为它是在 center 的外面再次嵌套了一层 div（center-wrapper），center外边距的宽度只要恰好等于left和right，这样在视觉上看起来center和left、right就是三个独立的板块。此时left的最左侧仍然是和wrapper的container的最左侧相邻，left的最右侧与center的container的最左侧相邻; right的最右侧仍然是和wrapper的container的最右侧相邻，right的最左侧与certer的container的最右侧相邻，因为我们并没有对wrapper和center-wrapper设置padding或者margin，而是对内侧的center设置了margin（其实center-wrapper基本上和wrapper是重合的，基本上并未对center-wrapper的样式做任何处理，但是我们需要center-wrapper的结构来构建center的结构）
HTML 结构
<div class="wrapper">
<div class="center-wrapper">
<div class="center">1111111</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
- 在wrapper 的三列 center-wrapper、left、right分别设置左浮动
- left 和 right 的宽度分别设置为 300px、200px ，center-wrapper 的宽度设置为 100%
- 对 left 设置 margin-left：100%，使其回到上一行的最左边
- 此时 center 中的部分内容会被其遮住，所以对 center-wrapper 设置 margin: 0 200px 0 300px，使其不被遮住
- 对 right 使用 margin-left：-200px，使其回到上一行的最右边，此时就大功告成
CSS 样式
.wrapper {
height: 500px;
}
.center-wrapper,
.left,
.right {
float: left;
height: 500px;
}
.center-wrapper {
width: 100%;
background-color: tomato;
}
.left {
width: 300px;
margin-left: -100%;
background-color: lightgreen;
}
.right {
width: 200px;
margin-left: -200px;
background-color: lightskyblue;
}
.center {
margin-left: 300px;
margin-right: 200px;
height: 500px;
}