三栏布局

双飞翼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .float {
      float: left;
    }
    #main {
      width: 100%;
      height: 200px;
      background-color: lightpink;
    }
    #main-wrap {
      margin: 0 190px 0 190px;
    }
    #left {
      width: 190px;
      height: 200px;
      background-color: lightsalmon;
      margin-left: -100%;
    }
    #right {
      width: 190px;
      height: 200px;
      background-color: lightskyblue;
      margin-left: -190px;
    }
  /*
    上述代码中 margin-left: -100%
    相对的是父元素的 content  宽度，即不包含 padding 、 border  的宽度。
  */
  </style>

</head>
<body>
<div id="main" class="float">
  <div id="main-wrap">三栏布局，中间一栏最先加载和渲染 中间内容随着宽度自适应</div>
</div>
<div id="left" class="float">两侧内容固定 防止中间内容被两侧覆盖 双飞翼布局用 margin</div>
<div id="right" class="float">两侧内容固定 防止中间内容被两侧覆盖 双飞翼布局用 margin</div>
</body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #container {
      padding-left: 200px;
      padding-right: 150px;
      overflow: auto;
    }
    #container p {
      float: left;
    }
    .center {
      width: 100%;
      background-color: lightcoral;
    }
    .left {
      width: 200px;
      position: relative;
      left: -200px;
      margin-left: -100%;
      background-color: lightcyan;
    }
    .right {
      width: 150px;
      margin-right: -150px;
      background-color: lightgreen;
    }
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
    /*
      上述代码中 margin-left: -100%
      相对的是父元素的 content  宽度，即不包含 padding 、 border  的宽度。
    */
  </style>
</head>
<body>
<!--
  圣杯布局和双飞翼布局的目的：

  三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。
  两侧内容固定，中间内容随着宽度自适应。
  一般用于 PC 网页。

  圣杯布局和双飞翼布局的技术总结：

  使用 float 布局。
  两侧使用 margin 负值，以便和中间内容横向重叠。
  防止中间内容被两侧覆盖，圣杯布局用 padding，双飞翼布局用 margin。
-->
<div id="container" class="clearfix">
  <p class="center">三栏布局，中间一栏最先加载和渲染 中间内容随着宽度自适应。</p>
  <p class="left">两侧内容固定</p>
  <p class="right">两侧内容固定</p>
</div>
</body>
</html>

# 三栏布局

# 双飞翼

# 圣杯布局

三栏布局

双飞翼

圣杯布局