task0001第六部分之三列布局

用两种不同的方式来实现一个三列布局

用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
两种方法就是说圣杯布局，和双飞翼布局…..
之前停留在在听说的阶段，一直以为摆出一个圣杯的样子的布局…嗯…好名字…..

圣杯布局

如果要让三个div在一个大div中紧挨横放，那会想到浮动，或者把div的display改成内联块状。
这个布局就是把左中右都浮动，左边和右边的div设定好宽度，中间的宽度设置为100%。为了把div撑开，给div都加上高度300px。但是下一个问题就是，中间div这样设定…宽度铺满了整个浏览器

所以为了让两边的div留位置，给三个div的父元素.bd，在这个包裹层里设定padding左右值分别为旁边两个div的来预留空间

css：
     body{
            margin: 0;
    .bd{
            padding: 0 100px;
       }
        .main {
          float: left;
          height: 300px;
          background-color: crimson;
      }
       .left{
           width: 100px;
            height: 300px;
            float: left;
           background-color: #77BBDD;
       }
        .right{
        float: left;
            width: 100px;
            height: 300px;
            background-color: #E79F6D;
       }

html：      
<div class="bd">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

然后就是想办法来把这下面的两个div移动到左右两边预留给他们的空白了。
为了不让这两个div脱离文档流，给左右两个div都设置相对定位。
左边的呢需要上移一个浏览器宽度也就是左移100%，再左移100px。右边的呢左边margin-left设为负100px的时候，右边的div已经向上了，但是它覆盖在了main这个中间的红色div上，会遮挡它的内容。

要把这个右边的div再右移100px。也就是left:100px;或者写
right:-100px;

最后这个代码可以是这样

css部分
 <style>
        body{
            margin: 0;
        }

        .bd{
            padding:0 100px;
       }
      .main {
          float: left;
          width: 100%;
          height: 300px;
          background-color: crimson;
      }

       .left{
           width: 100px;
            height: 300px;
          position:relative;
            float: left;
           right: 100px;
          margin-left: -100%;
           background-color: #77BBDD;
       }
        .right{
           width: 100px;
            height: 300px;
           float: left;
           position: relative;
            margin-left: -100px;
            left: 100px;
            background-color: #E79F6D;
       }
    </style>
html部分：
<div class="bd">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

那要是在开始的时候把三个div不用浮动，用内联块状这个属性是不是也可以实现呢…..
因为内联块状元素会默认div之间有间距，就像文字一样，所以在父元素可以设置font-size:0;来消除这个间距。

嗯….每个块里面的字体大小也要重新设置了。
嗯，设置完了之后移动一下左边的块，蓝色黄色两个块看起来一起在动，嗯 因为高度撑不开了,这个并没有脱离文档流，所以这个方法…..放弃

那这里使用浮动，应该是利用了浮动元素负边距的特性，这样就能把元素往上一行移动，为移动元素做铺垫。

好了，所以这个圣杯布局就是，三个元素全浮动，中间那个宽度百分百，最外层设padding留出两边值，然后再把下面两个div移动上去….

因为这个布局用了相对定位，容易产生一些问题，淘宝的前端对这个做出改进，提出了双飞翼布局。

双飞翼布局

这个布局就是在圣杯的基础上改进。
首先还是一样三个div都浮动， 然后设定好宽度高度后，要给两边div留出空白，中间层宽占满浏览器了。这次选择给中间层再加一个div嵌套。

<div class="bd">
    <div class="wrap">
        <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

那么这个浮动就直接加在这个中间层div上了。再给两边留空白，给中间div也就是.main设置margin。

  body{
            margin: 0;
        }
        .wrap{
            width: 100%;
            float: left;
        }
      .main {
          margin: 0 100px;
          height: 300px;
          background-color: crimson;
      }

       .left{
           width: 100px;
            height: 300px;
            float: left;
           background-color: #77BBDD;
       }
        .right{
           width: 100px;
            height: 300px;
           float: left;
       background-color: #E79F6D;
       }

然后又是移动下面那两个块的问题了。

     .left{
           width: 100px;
            height: 300px;
            margin-left: -100%;
            float: left;
           background-color: #77BBDD; 
       }
       .right{
           width: 100px;
            height: 300px;
           float: left;
           margin-left: -100px;
       background-color: #E79F6D;

这样就达到了最终效果，但是这样加了无语义的标签。
这个布局就是浮动左右和中间的嵌套层。中间层在嵌套的层里设置margin，为其他两个div留白，由于两个div初始位置不受padding影响的原因，这样再移动就只需要margin-left用负边距了。

如果有错误请多多指点,谢谢~