CSS 圣杯布局 / 双飞翼布局的实现的完整代码

CSS 圣杯布局和双飞翼布局是两种常见的三栏布局方式，它们的实现方式类似，都是通过浮动和负边距来实现。以下是两种布局方式的完整代码实现。

## CSS 圣杯布局

HTML 代码：

<div class="container">
  <div class="main">
    <p>Main Content</p>
  </div>
  <div class="left">
    <p>Left Sidebar</p>
  </div>
  <div class="right">
    <p>Right Sidebar</p>
  </div>
</div>

CSS 代码：

.container {
  padding: 0 200px;
  margin: 0 auto;
}

.main {
  float: left;
  width: 100%;
  background-color: #ccc;
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
  background-color: #eee;
}

.right {
  float: left;
  width: 200px;
  margin-right: -100%;
  position: relative;
  right: -200px;
  background-color: #eee;
}

/* Clearfix */
.container::after {
  content: "";
  display: table;
  clear: both;
}

## 双飞翼布局

HTML 代码：

<div class="container">
  <div class="main">
    <p>Main Content</p>
  </div>
</div>
<div class="sidebar left">
  <p>Left Sidebar</p>
</div>
<div class="sidebar right">
  <p>Right Sidebar</p>
</div>

CSS 代码：

.container {
  padding: 0 200px;
  margin: 0 auto;
}

.main {
  float: left;
  width: 100%;
  background-color: #ccc;
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
  background-color: #eee;
}

.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  position: relative;
  right: -200px;
  background-color: #eee;
}

/* Clearfix */
.container::after {
  content: "";
  display: table;
  clear: both;
}