圣杯布局和双飞翼布局圣杯布局双飞翼布局，核心意思：左右内容宽度固定，中间内容随着浏览器宽度自适应，优先加载中间区域解

圣杯布局

核心意思：左右内容宽度固定，中间内容随着浏览器宽度自适应，优先加载中间区域
解决思路：给中间布局内容包个父元素，然后float:left把元素浮动到一行，给中间需要自适应的元素宽度设置成100%，父级元素来个padding值为左右栏的宽度，然后用左右元素的，margin负值加相对定位解决位置问题。
代码实现：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>头部</header>
    <div class="content">
      <div id="center" class="column">中间</div>
      <div id="left" class="column">左侧</div>
      <div id="right" class="column">右侧</div>
    </div>
    <footer>尾部</footer>
  </body>
</html>
<style>
  header {
    width: 100%;
    background-color: red;
    text-align: center;
  }
  footer {
    width: 100%;
    background-color: pink;
    text-align: center;
    clear: both;
  }
  .column {
    height: 200px;
    position: relative;
    float: left;
  }
  #center {
    width: 100%;
    background-color: aquamarine;
  }
  .content {
    padding: 0 200px;
  }
  #left {
    width: 200px;
    margin-left: -100%;
    right: 200px;
    background-color: bisque;
  }
  #right {
    width: 200px;
    margin-left: -200px;
    background-color: bisque;
    right: -200px;
  }
</style>

双飞翼布局

核心意思：实现需求和圣杯布局一样
解决思路：和圣杯布局不同的是，这个是给中间需要自适应的内容加个父元素，然后利用margin值给左右栏留位置，其余一样。