两栏布局、三栏布局（圣杯布局、双飞翼布局）

经典布局—两栏布局(一栏固定，另外一栏自适应)、三栏布局（圣杯布局、双飞翼布局）

1、两栏布局

两栏布局是一栏固定，另外一栏自适应，这是我以前面试时遇到的问题

实现思路：

• 两个盒子，一个左边盒子，一个右边盒子
• 左边盒子宽度固定，右边盒子宽度自适应
• 左边盒子浮动，右边盒子开启BFC，清除左边的浮动
  下面来看代码吧

  <style>
    .left{
      width:100px;
      height:100px;
      float:left;
      background-color:aqua;
    }
    .right{
      background-color:red;
      /* 开启BFC清除左边盒子的浮动 */
      overflow:hidden;
      height:200px;
    }
  </style>

    <div class="left">左边</div>
    <div class="right">右边</div>

2、三栏布局

三栏布局的特点：

• 中间栏最先渲染，且宽度自适应
• 两边宽度固定

2.1 圣杯布局

实现过程详解：

• 1、第一步既然中间那层先渲染，html的结构就是中间、左边、右边

  <div class="container">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
  
  .middle{
      width:100%;
      height:200px;
      background-color:darkblue;
    }
    .left{
      width:200px;
      height:100px;
      background-color:burlywood;
    }
    .right{
      width:200px;
      height:100px;
      background-color:chocolate;
    }

• 2、三个盒子一起浮动

    .fl{
      float:left;
    }

-3、 给左边和右边盒子留有空间

 
.container{
  padding:0 200px;
  background-color:#ddd;
}

• 4、移动左盒子至container的左上位置

   	 - 首先移动左盒子至中间盒子的左上边
  

				.left{
 					margin-left:-100%;
 				}

- 再往左平移padding-left的距离，通过相对定位实现

    .left{
      /* 平移padding-left距离 */
      position:relative;
      right:200px;
      }

• 5、移动右盒子移动至container右上位置
  和移动左盒子是一样的过程，

	.right{
 					 position:relative;
     				 left:200px;
     				 margin-left:-200px;
 		}

6、设置body的最小宽度
min-width=左边盒子的width(200px)+右边盒子的width（200px）+左边盒子往左边平移的宽度（200px）

body{
	min-width:600px
}

2.2 双飞翼布局

效果和圣杯布局的效果是一样
实现过程详解：

• 1、第一步既然中间那层先渲染，html的结构就是中间、左边、右边

  <div class="container fl">
    <div class="middle">中间</div>
  </div> 
    <div class="left fl">左边</div>
    <div class="right fl">右边</div>
  
    .container{
      width:100%;
    }
    .middle{
      height:200px;
      background-color:darkblue;
    }
    .left{
      width:200px;
      height:100px;
      background-color:burlywood;
    }
    .right{
      width:200px;
      height:100px;
      background-color:chocolate;
    }

• 2、三个盒子一起浮动

    .fl{
      float:left;
    }

-3、 给左边和右边盒子留有空间

 
.middle{
  margin:0 200px;
}

4、移动左盒子至container的左上位置,这里与圣杯布局不同的是，中间盒子middle设置了外边距，左边盒子移动的还是container的宽度，移动后就是外边距的范围内。

.left{
	margin-left:-100%;
}

5、移动右盒子移动至container右上位置

.right{
	margin-left:-200px;
}

6、设置body的最小宽度
min-width=左边盒子的width+右边盒子的width+中间盒子最小宽度(假设是150px)

body{
	min-width:550px
}