圣杯布局与双飞翼布局

圣杯布局

<div class="container>
    <div class="main box">main</div>
    <div class="left box">left</div>
    <div class="right box">right</div>
</div>

<style>
  .box{
        float: left;
        height: 300px;
      }
      .container{
        padding: 0 300px 0 200px;
        overflow: hidden;
      }
      .main{
        width: 100%;
        background-color: blue;
      }
      .left{
        width: 200px;
        background-color: pink;
        margin-left: -100%;

         position: relative;
        left: -200px; 
      }

      .right{
        width: 300px;
        background-color: yellow;
        margin-left: -300px;
        position: relative;
        right: -300px; 
      }
</style>

分为如下几步：

1. main、left、right：均float:left; 可设置高
2. main: (width: 100%;) 使其撑满整个容器，left和right被挤到第二行
3. left: margin-left: -100%;
   注意： margin-left：-100%，是以父元素的width为依据的；这样left就移动到第一行main的左边位置，并遮挡住了main
4. right: margin-lert: -300px;
   right也移动到了第一行main的右边位置，并遮住了main
   以上4步，双飞翼布局类似，两种布局主要的不同点在于处理父元素的遮挡
5. 给container添加：padding: 0 300px 0 200px;
   这时候的显示如下：

Paste_Image.png

left、main和right均被移动到中间

给left添加： position: relative; left: -200px;
给right添加：position: relative; right: -300px;
大功告成

Paste_Image.png

圣杯布局的y一个缺点是： main的宽度不能小于left的宽度，因为left的margin-left: -100%；100%也就是container的宽度，而container的宽度=main的宽度，当main的宽度小于left的宽度时，-100%移动的距离小于left的宽度，因此无法将left移动到与main排列在同一行

双飞翼布局

代码如下：

<div class="container">
    <div class="main-wrap box">
        <div class="main">main</div>
    </div>
    <div class="left box">left</left>
    <div class="right box">right</div>
</div>
<style>
.box{
float: left;
}
.main-wrap{
width: 100%;
}
.main{
margin: 0 300px 0 200px;
height:  400px;
background: blue;
}
.left{
width: 200px;
height: 400px;
background: pink;

margin-left: -100%;
}
.right{
width: 300px;
height: 400px;
background: grey;

margin-lert: -300px;
</style>

双飞翼布局主要的不同点在于：给main添加了一个包裹层main-wrap，让其width: 100%; 然后对main使用margin，去除left和right对main的遮盖

总结

两者的共同点

两者的不同点