简单易懂 圣杯布局&双飞翼布局

圣杯布局，和双飞翼布局

1.什么是圣杯布局和双飞翼布局？圣杯布局和双飞翼布局都是实现三栏布局的方法，左右定宽，中间自适应，是很常见的布局，其原理都是margin-left 的夫负边距
2.圣杯布局

<style>
   header{
       width:100%;
       height:40px;
       background-color:darkseagreen;
   }
   .container{
       height:200px;
       padding:0px 200px;
   }
   .middle{
       width:100%;
       height:200px;
       background-color:deeppink;
       float:left;
   }
   .left{
       width:200px;
       height:200px;
       background:blue;
       float:left;
       margin-left:-100%;
       position:relative;
       left:-200px;
   }
   .right{
       width:200px;
       height:200px;
       background:darkorchid;
       float:left;
       margin-left:-200px;
       position:relative;
       right:-200px;
    .footer{
       width:100%;
       height:30px;
       background:darkslategray;  
       }
   }
</style>
<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间中间弹性区间</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>

1.以上三者middle righ left 三者都是用来float 和position
2.middle部分沾满了整个屏幕宽度的100%所以要把用margin-left把left拉到最左面
3.应用了margin-left的下一步就是把left的值给拉回来这时有了总框架的应用
4.container：0 200px的作用实际上是把left right设置的值给拉回屏幕内
5.应用position后才能应用的left right的值是吧他们还原到相应的位置

3.双飞翼布局

<style>
.header{
      width: 100%;
      height:30px;
      background:red;
   }
.content{
      overflow:hidden;
      padding:0 100px;
   }
.footer{
      width:100%;
      height:30px;
      background:red;
   }
.middle{
      width:100%;
      float:left;
   }
.inner-middle{
      width:100%;
      height:80px;
      background:green;
   }
.left{
     width:100px;
     float:left;
     height:80px;
     margin-left:-100%;
     background:yellow;
   }
   .right{
     width:100px;
     float:left;
     height:80px;
     margin-left:-100px;
     background:pink;
   }

</style>
<div class="header"></div>
<div class="content">
  <div class="middle">
            <div class="inner-middle"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="footer"></div>

1.双飞翼布局只应用了float： left；
2.其padding原理与圣杯布局原理相同 ，同时父元素把里面的内容起到拉回来的作用
3.父元素overflow：hidden；的应用它实际上是隐藏溢出部分的。但实际上它起了决定性的作用
在BFC中它起到了激活块的功能 虽然float也是参与应用之一