1 左侧固定宽度，右侧自适应宽度的两列布局实现

HTML:
<div className="outer">
        <div className="left">固定宽度</div>
        <div className="right">自适应宽度</div>
      </div>

方法1：左侧div设置成浮动：float: left，右侧div宽度会自拉升适应

.outer {
 width: 100%;
 height: 500px;
 background-color:
 }
 .left {
 width: 200px;
 height: 200px;
 yellow;
 background-color: red;
 float: left;
 }
 .right {
 height: 200px;
 background-color: blue;
 }

方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

绝对定位元素的第⼀个高级特性就是其具有自动伸缩的功能， 当我们将 width 设置为 auto 的时候 (或者不设置， 默认为 auto )， 绝对定位元 素会根据其 left 和 right 自动伸缩其大小

.outer {
 width: 100%;
 height: 500px;
 background-color: yellow;
 position: relative;
 }
 .left {
 width: 200px;
 height: 200px;
 background-color: red;
 }
 .right {
 height: 200px;
 background-color: blue;
 position: absolute;
 left: 200px;
 top:0;
 right: 0;
 }

 方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

.outer {
 width: 100%;
 height: 500px;
 background-color: yellow;
 position: relative;
 }
 .left {
 width: 200px;
 height: 200px;
 background-color: red;
 position: absolute;
 }
 .right {
 height: 200px;
 background-color: blue;
 margin-left: 200px;
 }

方法4：使用flex布局

.outer {
 width: 100%;
 height: 500px;
 background-color: yellow;
 display: flex;
 flex-direction: row;
 }
 .left {
 width: 200px;
 height: 200px;
 background-color: red;
 }
 .right {
 height: 200px;
 background-color: blue;
 flex: 1;
 }

2  流体布局

 

HTML:

<div className="container">
        <div className="left"></div>
        <div className="right"></div>
        <div className="main"></div>
      </div>

.container{
    border: 1px solid black;
    margin-top: 24px;
    margin: 24px 12px;
}

.left{
    float:left;
    width: 100px;
    height: 200px;
    background-color: red;
}
.right{
    float:right;
    width: 200px;
    height: 200px;
    background-color: yellow;
}
.main{
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background: green;
}

3 圣杯布局

方法一：利用定位实现两侧固定中间自适应

        1.1 父盒子设置左右 padding 值

        1.2 给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

        1.3 中间盒子自适应

<div className="father">
        <div className="left"></div>
        <div className="center"></div>
        <div className="right"></div>
      </div>

.father {
  height: 400px;
  background-color: aqua;
  position: relative;
  padding: 0 200px;
  margin-top: 20px;
}

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

.left {
  left: 0;
}

.right {
  right: 0;
}

.center {
  background-color: blueviolet;
  height: 350px;
}

方法二：利用 flex 布局实现两侧固定中间自适应

        2.1 父盒子设置 display:flex;

        2.2 左右盒子设置固定宽高

        2.3 中间盒子设置 flex:1 ;

 方法三：利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

        3.1 左右固定宽高，进行浮动

        3.2 中间 overflow: hidden;

<div className="father">
        <div className="left"></div>
        <div className="right"></div>
        <div className="center"></div>
      </div>

.father {
  height: 500px;
  background-color: pink;
}

.left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: blue;
}

.right {
  float: right;
  top:0px;
  width: 200px;
  height: 400px;
  background-color: blue;
}

.center {
  height: 450px;
  background-color: green;
  overflow: hidden;
}

原文参考：圣杯布局（三种方法）-CSDN博客 

4  双飞翼布局

<div className="content">
 <div className="main"></div>
 </div>
 <div className="left"></div>
 <div className="right"></div>

.content {
    float: left;
    width: 100%;
    }
    .main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background: green;
    }
    .main::after {
    content: '';
    display: block;
    font-size:0;
    height: 0;
    zoom: 1;
    clear: both;
    }
    .left {
    float:left;
    height: 200px;
    width: 100px;
    margin-left:-100%;
    background: red;
    }
    .right {
    float: right;
    height: 200px;
    width: 200px;
    margin-left:-200px;
    background: blue;
    }