自适应布局

一、自适应两栏布局

一般的两栏布局是指，左边一栏宽度固定，右边一栏宽度自适应。

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

方法一：利用绝对定位。父盒子设置为相对定位，左栏设置为绝对定位，右栏通过 margin-left 为左栏空出位置。 

    .box {
      position: relative;
      height: 300px;
      margin: 30px;
    }

    .left {
      position: absolute;
      width: 200px;
      height: 300px;
      background-color: pink;
    }

    .right {
      height: 300px;
      margin-left: 200px;
      background-color: skyblue;
    }

方法二：利用浮动。左栏设置左浮，右栏通过 margin-left 为左栏空出位置。

    .box {
      height: 300px;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: pink;
    }

    .right {
      height: 300px;
      background-color: skyblue;
      margin-left: 200px;
    } 

方法三：利用浮动，触发BFC。左栏设置左浮，右栏设置 overflow:hidden。

    .box {
      height: 300px;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: pink;
    }

    .right {
      height: 300px;
      background-color: skyblue;
      overflow: hidden;
    } 

---

补充扩展：

BFC（格式化上下文）：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定的规则进行物品的摆放，并且不会影其他环境中的物品。如果一个元素符合触发BFC条件，则BFC中的元素布局不受外部影响。

创建BFC的条件：

• 根元素：body;
• 元素设置浮动：float除none以外的值；
• 元素设置定位：position（absolute、fixed）；
• display值为：inline-block、table-cell、table-caption、flex等；；
• overflow值为：hidden、auto、scroll；

BFC的特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致；
• 在BFC中上下相邻俩容器的margin会重叠；
• 计算BFC的高度时，需要计算浮动元素的高度；
• BFC区域不会与浮动的容器发生重叠；
• BFC是独立的容器，容器内部元素不会影响外部元素；
• 每个元素的左margin值和容器的左border相接触。

---

方法四：利用flex布局。左栏固定宽度，右栏设置 flex:1，会占满剩余空间。

    .box {
      display: flex;
      height: 300px;
    }

    .left {
      width: 200px;
      height: 300px;
      background-color: pink;
    }

    .right {
      flex: 1;
      height: 300px;
      background-color: skyblue;
    } 

方法五：利用绝对定位。父盒子设置相对定位，左栏固定宽度，右栏设置为绝对定位，左边设其宽度大小，其余方向定位均为0。

    .box {
      position: relative;
      height: 300px;
    }

    .left {
      width: 200px;
      height: 300px;
      background-color: pink;
    }

    .right {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 200px;
      right: 0;
      height: 300px;
      background-color: skyblue;
    } 

二、自适应三栏布局

三栏布局一般是指页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。

  <div class="box">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
  </div>

方法一：利用绝对定位。左右两栏设置绝对定位，中间栏设置 margin-left 和 margin-right为左右两栏空出位置。

    .box {
      position: relative;
      height: 300px;
    }

    .left {
      position: absolute;
      left: 0;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .mid {
      height: 300px;
      background-color: yellow;
      margin-left: 300px;
      margin-right: 200px;
    }

    .right {
      position: absolute;
      top: 0;
      right: 0;
      height: 300px;
      width: 200px;
      background-color: skyblue;
    } 

方法二：利用flex布局。左右两栏固定大小，中间栏设置 flex:1，占满剩余空间。

    .box {
      display: flex;
      height: 300px;
    }

    .left {
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .mid {
      flex: 1;
      height: 300px;
      background-color: yellow;
    }

    .right {
      height: 300px;
      width: 200px;
      background-color: skyblue;
    }

方法三：利用浮动。左右两栏固定大小，左栏设左浮，右栏设右浮，中间栏设置左右的 margin值，为左右两栏空出位置。

    .box {
      height: 300px;
    }

    .left {
      float: left;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .mid {
      height: 300px;
      background-color: yellow;
      margin-left: 300px;
      margin-right: 200px;
    }

    .right {
      float: right;
      height: 300px;
      width: 200px;
      background-color: skyblue;
    } 

注意：该方法，中间栏必须放最后，因为设置浮动后，元素会脱离文档流，不占据空间，但是，只会影响浮动元素之后的元素，不会影响之前的。

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="mid"></div>
  </div>

方法四：圣杯布局。父元素设置左右padding，为左右两栏让出位置。中间栏放最前面，左栏设置左浮，中间栏设置左浮，右栏设置右浮。设置中间栏的宽度为父盒子宽度，则会将左右两栏挤到下一行，通过设置左右两栏的margin负值来将其移动至上一行，再利用相对定位，定位到两边。

    .box {
      height: 300px;
      padding-left: 300px;
      padding-right: 200px;
    }

    .mid {
      float: left;
      width: 100%;
      height: 300px;
      background-color: yellow;
    }

    .left {
      position: relative;
      left: -300px;

      float: left;
      margin-left: -100%;

      width: 300px;
      height: 300px;
      background-color: pink;
    }


    .right {
      position: relative;
      left: 200px;

      float: right;
      margin-left: -200px;

      height: 300px;
      width: 200px;
      background-color: skyblue;
    }

方法五：双飞翼布局。为中间栏再添加一个父盒子wapper，并且放在最前面。让左右栏和wapper都左浮动，由于wapper的宽度是最大的盒子宽度的100%，所以会将左右两栏挤到下一行，为左右两栏设置margin-left的负值将其移动至上一行，然后为中间栏设置左右的margin为左右两栏空出位置。

 <div class="box">
    <div class="wapper">
      <div class="mid">1111111111111111111111</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

    .box {
      height: 300px;
    }

    .wapper {
      float: left;
      width: 100%;
      height: 300px;
    }

    .mid {
      margin-left: 300px;
      margin-right: 200px;
      height: 300px;
      background-color: yellow;
    }

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

      width: 300px;
      height: 300px;
      background-color: pink;
    }


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

      height: 300px;
      width: 200px;
      background-color: skyblue;
    }