CSS经典布局-圣杯布局和双飞翼布局对比

一、圣杯布局、利用浮动、负边距来实现
HTML结构层

    <div class="box">
        <div class="main">你说什么是我 币啊报价表几十年开发及吧科技边框和不哭不哭苦逼困吧科技贝克汉堡可比好口碑合并并浴柜一hiUI会U币举报
        看卡看世界经济积极上进咔咔咔看卡看快捷键坎坎坷坷</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

*{margin:0;padding:0;}
 .main,.left,.right{
        height:100px;
        float:left;
    }
  .main{
        width:100%;
        background:aqua;
        }   
  .left{
        width:200px;
        background:tomato;
        margin-left:-100%;
        }
  .right{
        width:200px;
        background:blue;        
        margin-left:-200px;
        }

就这样，效果就简单的实现了，但是这里有2个坑
1.左右两边把中间中间栏的div的内容给遮挡了。
2.因为中间main的宽度是百分之百，当你将浏览器宽度缩短到一定程度的时候，会使得中间子元素的宽度比左右子元素宽度小的时候，这时候布局就会出现问题。所以首先，这提示了我们在使用圣杯布局的时候一定要设置整个容器的最小宽度。
1.解决方法：
给父元素设置padding-left:200px;padding-right:200px;
显示效果如下，但这并不是我们想要的结果

设置左右div相对定位，将左边的子元素和右边的子元素向两边移动就好。

2.解决方法：
给父元素设置最小宽度为左右两个div的宽度 min-width:200px;
最终代码如下：

  *{margin:0;padding:0;}

         .box{
            min-width:200px;
            padding-left:200px;
            padding-right:200px;        
         }
        .main,.left,.right{
            height:100px;
            float:left;
        }
        .main{
            width:100%;
            background:aqua;
        }   
        .left{
            width:200px;
            background:tomato;
            position:relative;
            margin-left:-100%;
            left:-200px;
        }
        .right{
            width:200px;
            background:blue;        
            position:relative;
            margin-left:-200px;
            right:-200px;
} 

二、双飞翼布局
划重点：对比
其实双飞翼布局是为了解决圣杯布局的弊端提出的，圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
*所以，需要给中间的div加一个父集元素

<div class="box">
      <div class="father-main">
        <div class="main">你说什么是我 币啊报价表几十年开发及吧科技边框和不哭不哭苦逼困吧科技贝克汉堡可比好口碑合并并浴柜一hiUI会U币举报
        看卡看世界经济积极上进咔咔咔看卡看快捷键坎坎坷坷
        </div>
      </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

 .father-main{
            height:100px;
            background:skyblue;
            float:left;
        }
        .main{
            margin-left:200px;
            margin-right:200px;
        }
       .right{
           width:200px;
           height:100px;
           float:left;
           background:#456;
           margin-left:-200px;
       }
       .left{
           width:200px;
           height:100px;
           float:left;
           background:tomato;
           margin-left:-100%;
       }