写在前面

在前端页面制作过程中，三栏布局也是很常见的一种布局方式，三栏布局是主体，通常还包含页眉导航栏和页脚联系信息栏，总共是五大块，大部门网站都是分成这五大栏，页眉导航栏和页脚联系信息栏都是 width: 100%，占满一行，其实 div 等块级元素就默认占满一行。以下介绍中间的三栏布局。
三栏布局的特点是，左边侧边栏和右边侧边栏的宽度是固定的大小的(或者有最大宽度限制的)，然后中间一栏的宽度自适应。

1. flex 布局——小case

三栏布局使用 flex 布局则是小case，且两端不用固定宽度和高度，可由内容撑开，以下代码为了不写那么多内容直接用宽度撑开了，其实可以靠内容撑开。

  1. <header>header</header>
  2. <div class="container">
  3.     <aside class="left">left</aside>
  4.     <main>middle</main>
  5.     <aside class="right">right</aside>
  6. </div>
  7. <footer>footer</footer>
  8. 复制代码
  1. body{
  2.   text-align: center;
  3. }
  4. header{
  5.   background: red;
  6. }
  7. footer{
  8.   background: green;
  9. }
  10. .container{
  11.   display: flex;
  12. }
  13. .container aside{
  14.   background: orange;
  15.   height: 100px;
  16.   width: 100px;
  17. }
  18. .container main{
  19.   background: blue;
  20.   flex-grow: 1;
  21. }
  22. 复制代码

2. float布局——有点复杂

以下两种方式是使用 float 布局各种拼凑来回实验总结出来的在早期前端界比较流行的布局方式，听名字不知道其咋起的名字，我觉得一点都不形象，在 flex 布局之前的单靠 float 布局的 css 布局真的需要依靠没有逻辑的东拼西凑，多次实验，然后出来个比较好的办法，总结下来起个名字以便他人使用，下面一步步来吧。
（1） 写html元素标签，页眉 / 主体 / 页脚。中间一栏 main 写在三栏中的最上方

  1. <header>header</header>
  2. <div class="clearfix">
  3.     <main>middle</main>
  4.     <aside class="left">left</aside>
  5.     <aside class="right">right</aside>
  6. </div>
  7. <footer>footer</footer>
  8. 复制代码

（2） 添加基础样式，为了方便将两个侧边栏宽度设置为了一样宽

  1. header{
  2.   background: red;
  3. }
  4. footer{
  5.   background: green;
  6. }
  7. .clearfix main{
  8.   background: blue;
  9. }
  10. .clearfix aside{
  11.   background: orange;
  12.   width: 100px;
  13. }
  14. 复制代码

（3）将三栏元素全部设置为 float: left; 左浮，main自适应主栏的宽度设置为100%，同时其父元素清除浮动

  1. /*---清除浮动---*/
  2. .clearfix{
  3.   zoom: 1;
  4. }
  5. .clearfix:after{
  6.   content: '';
  7.   display: block;
  8.   clear: both;
  9. }
  10. /*---清除浮动---*/
  11. .clearfix main{
  12.   background: blue;
  14.   /*add*/
  15.   float: left;
  16.   width: 100%;
  17. }
  18. .clearfix aside{
  19.   background: orange;
  20.   width: 100px;
  22.   /*add*/
  23.   float: left;
  24. }
  25. 复制代码

三栏布局 - 图1
（4） 此时我们需要做的就是让下面的 left 和 right 栏跑上面去，一个跑到 middle 的最左边，一个跑到 middle 的最右边，那么怎么上去呢？使用负margin，并且，让左边元素上去，就设置其左侧margin为 负的middle 栏的宽度，middle 栏的宽度是100%宽，因此设置左栏 margin-left: -100%;，这样左栏就跑到了 middle 的最左边，同理，为了让右边栏跑到 middle 的最右边就需要其左侧跑自身的宽度，即 margin-left: -100px;

  1. /*---巧用负 margin跑上去---*/
  2. .clearfix .left{
  3.   margin-left: -100%;
  4. }
  5. .clearfix .right{
  6.   margin-left: -100px;
  7. }
  8. /*---巧用负 margin跑上去---*/
  9. 复制代码

三栏布局 - 图2
（5）上述效果看起来是大功告成，但是 main 主栏只是被盖住了，不然你看我的 main 字去哪里了? 因此接下来的操作就是如何将 main 的宽度设置为减去两侧的宽度。此时就分叉形成了两条道路，从而形成了两种不同的叫法，一个叫圣杯布局，一个叫双飞翼布局，如下

2.1 圣杯布局

（6）圣杯布局接下来的做法是为三栏的父元素设置内 padding，左padding为左侧栏的宽度，右padding值为右侧栏的宽度

  1. .clearfix{
  2.   zoom: 1;
  4.   /*add*/
  5.   padding: 0 100px 0 100px;
  6. }
  7. 复制代码

（7）此刻左右栏也跟着挤进去了，接下来就是将连个侧边栏再使用相对定位结合负 margin 使其归原位

  1. .clearfix aside{
  2.   background: orange;
  3.   width: 100px;
  4.   float: left;
  6.   /*add*/
  7.   position: relative;
  8. }
  9. .clearfix .left{
  10.   margin-left: -100%;
  12.   /*add*/
  13.   left: -100px;
  14. }
  15. .clearfix .right{
  16.   margin-left: -100px;
  18.   /*add*/
  19.   right: -100px;
  20. }
  21. 复制代码

（8）至此，圣杯布局大功告成，这里我没设置高度，可设置高度进行查看，但三栏的高度必须要设置为一样的值才能使三栏的高度一样，当然不需要一样也可不设置。但是这里存在问题，当缩小到一定程度时布局会乱掉，因此要为body加上 min-width，保持两个固定宽度的侧边栏能显示全。

2.2 双飞翼布局

（6）请自行倒回上述第5步骤，开始另外一个方式的布局，main 内容被覆盖了，除了使用外围的 padding，还可以考虑使用内围的 margin。给main增加一个内层div(. main-inner), 然后设置内围div 的 margin:0 100px 0 100px

  1. <div class="clearfix">
  2.     <!--modify-->
  3.     <main>
  4.       <div class="mainInner">middle</div>
  5.     </main>
  6.     <!--modify-->
  8.     <aside class="left">left</aside>
  9.     <aside class="right">right</aside>
  10.   </div>
  11. 复制代码
  1. /*add*/
  2. .clearfix main .mainInner{
  3.   margin: 0 100px 0 100px;
  4. }
  5. 复制代码

（7）得到的效果和上述是一样的，也要记得给body加上min-width，至此，双飞翼版本的三栏布局大功告成

2.3 我的猜想

根据上述第5步骤，我想的是，既然双飞翼布局是使用内围的 margin ,为什么不直接为 main 主栏设置 padding 呢，直接 main{padding: 0 100px 0 100px}，这样也能使其内容显示在中间部分，只是其两侧有内容，使用 padding 让其不放内容了，我自己尝试了下也可以，这样就不用圣杯布局那样绕来绕去了，但这样 main 的全部部分并不是看到的部分，我不清楚这样做会有什么问题，肯定有问题，不然就不会有圣杯布局那样绕一大圈了。后续用到再说吧。