圣杯布局和双飞翼布局的实现方法

1.传统布局float+margin

使用传统的float浮动和相对定位来实现

<div class="main-container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

/* 检查父容器边界 */
.main-container {
  padding: 0 200px;
  overflow: hidden;
  min-width: 600px; //防止缩小后左右两边因为margin-left看不见
}
.main {
  width: 100%;
  background-color: pink;
}
.main,
.left,
.right {
  float: left;
  height: 200px;
}
/*一个知识点：当浮动元素的margin-left值正好等于剩余宽度时，该元素会自动浮动靠近上一行元素，所以left和right会在main的两边*/
.left {
  width: 200px;
  margin-left: -100%; /* 关键，针对父元素的宽度移动，如果超出当前行的宽度，会自动往上一层移动 */
  position: relative; //相对于自身变动
  left: -200px; /* 微调 */
  background: #0ff;
}
.right {
  width: 200px;
  background: #ff0;
  margin-left: -200px; /* 关键 */
  position: relative;
  right: -200px; /* 微调 */
}

2.使用flex布局

flex布局实现两列固定中间自适应

<div class="flex-container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.flex-container {
  display: flex;
  height: 200px;
  .main {
    flex: 1;
    background-color: pink;
  }
  .left,
  .right {
    flex: 0 0 200px; //固定宽度;
  }
  .left {
    background-color: #0ff;
  }
  .right {
    background-color: #ff0;
  }
}

3.使用grid网格布局

grid网格直接为列设置值

<div class="grid-container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.grid-container {
  height: 200px;
  display: grid;
  grid-template-columns: 200px 1fr 200px; //三列，第一列200px，第二列自适应，第三列200px;
  .main {
    background-color: pink;
  }
  .left {
    background-color: #0ff;
  }
  .right {
    background-color: #ff0;
  }
}

二、双飞翼布局

双飞翼的特点是三列设置浮动，中间内容区域设置左右两边margin，两边列设置margin-left实现在同一行上

<div class="double-container">
  <div class="main">
    <div class="main-content">
      主内容区，粉色区域是主内容区的背景色，主内容区的宽度是整个页面的宽度减去左右边栏的宽度，绿色为主内容区的高度。蓝色为左右两列的高度，只会根据内容的高度来自适应。
      (占位字哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈)
    </div>
  </div>
  <div class="left">左侧边栏</div>
  <div class="right">右侧边栏</div>
</div>

.main {
  float: left;
  width: 100%;
  background-color: pink;
}
.main-content {
  margin-left: 200px; /* 左侧边栏宽度 */
  margin-right: 150px; /* 右侧边栏宽度 */
  background-color: #c6ffdd;
}

.left,
.right {
  float: left;
}

.left {
  width: 200px;
  background-color: #6dd5fa;
  margin-left: -100%; /*需要同时设置*/
}

.right {
  width: 150px;
  background-color: #2980b9;
  margin-left: -150px; /*需要同时设置*/
}