三栏布局

一、使用负margin形成三栏布局的条件

1. 三栏在html中的排列顺序为：中间栏、左边栏、右边栏（中间栏作为主要内容放在前面是为了优先渲染）
2. 三栏都设置左浮动，且需要包裹在BFC中（清除浮动对其他文档流的影响）
3. 两侧边栏宽度固定，中间栏宽度为100%自适应
4. 左边栏设置margin-left: -100%，100%是父容器的宽度；
5. 右边栏设置margin-left:-width，“width”是右边栏的固定宽度
6. 父容器设置左右padding或中间设置左右margin预留出左边栏和右边栏存放的空间，预留的空间必须大于或等于左右两栏的固定宽度
7. 左边栏和右边栏设置position：relative分别移到左右两边预留的空间

二、圣杯布局

• 实现步骤：

  1. 三个容器设置左浮动，并清除浮动；
  2. 第一个容器（中间栏）宽度设为100%；
  3. 第二个容器（左边栏）宽度固定为200px（固定值根据实际需求设定），且margin-left为-100%；
  4. 第三个容器（右边栏）宽度固定为200px（根据实际需求设定），且margin-left为-200px（自身宽度）；
  5. 三个容器的父容器设置左右padding分别为200px（左右两栏的宽度），用于存放左边栏和右边栏；
  6. 左边栏设置position: relative;、right:200px;使左边栏移动到第一个容器预留的左侧空间；
  7. 右边栏设置position: relative;、left: 200px;使右边栏移动到第一个容器预留的右侧空间；
  8. 完成。

• 结构代码：
  <div class="ct">
  <div class="box1"> </div>
  <div class="box2"></div>
  <div class="box3"></div>
  </div>

• 样式代码：
  <style>
  .ct{
  padding-left: 200px;
  padding-right: 200px;
  }
  .ct:after{
  content: '';
  display: block;
  clear: both;
  }
  .box1{
  float: left;
  width: 100%;
  height: 500px;
  background: yellow;
  }
  .box2{
  position: relative;
  right: 200px;
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -100%;
  background: red;
  }
  .box3{
  position: relative;
  left: 200px;
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background: blue;
  }
  </style>

  
  

三、双飞翼布局

• 实现步骤：
  1. 三个容器设置左浮动，并清除浮动；
  2. 第一个容器（中间栏）宽度设为100%；
  3. 第二个容器（左边栏）宽度固定为200px（固定值根据实际需求设定），且margin-left为-100%；
  4. 第三个容器（右边栏）宽度固定为200px（根据实际需求设定），且margin-left
     为-200px（自身宽度）；
  5. 第一个容器中添加一个子元素用于存放主要内容，并将子元素的左右margin分别设为200px，预留出左边栏和右边栏的存放空间；
  6. 完成。
• 结构代码：
  <div class="ct">
  <div class="box1">
  <div class="main"></div>
  </div>
  <div class="box2"></div>
  <div class="box3"></div>
  </div>
• 样式代码：
  <style>
  .ct:after{
  content: '';
  display: block;
  clear: both;
  }
  .box1{
  float: left;
  width: 100%;
  height: 500px;
  background: yellow;
  }
  .box2{
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -100%;
  background: red;
  }
  .box3{
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background: blue;
  }
  .main{
  height: 500px;
  margin-left: 200px;
  margin-right: 200px;
  background: green;
  }
  </style>