# 圣杯布局&双飞翼布局§ 圣杯布局面试高频指数：★★★★☆ 在弹性布局以前，圣杯布局是通过浮动和定位实现三栏布局的一

§ 圣杯布局

面试高频指数：★★★★☆

在弹性布局以前，圣杯布局是通过浮动和定位实现三栏布局的一种方案之一

圣杯布局的特点：

上下为通栏，下通栏清浮动
中间为三栏布局，子元素按中左右的顺序浮动float:left
- 宽度
  - 左边栏宽度固定 = 父元素的左内边距padding-left
  - 右边栏宽度固定 = 父元素的右内边距padding-right
  - 中间内容宽度 = 100%
- 位置
  - 左右边栏相对定位position:relative
  - 左边栏左外边距margin-left: -100%，right:宽度
  - 右边栏左外边距margin-left:-宽度，right:-宽度
- 注意
  - 需设置最小宽度min-width，避免视窗宽度过小，浮动错位

圣杯布局

<style>
body { margin: 0; }
div {
  text-align: center;
  color: #fff;
}
.header, .footer {
  height: 50px;
  background-color: pink;
  line-height: 50px;
}
.content {
  padding-left: 200px;
  padding-right: 150px;
  min-width: 500px;
  line-height: 500px;
}
.content > div {
  float: left;
  height: 500px;
}
.center {
  width: 100%;
  background-color: mediumturquoise;
}
.left, .right {
  position: relative;
}
.left {
  width: 200px;
  right: 200px;
  margin-left: -100%;
  background-color: skyblue;
}
.right {
  width: 150px;
  right: -150px;
  margin-left: -150px;
  background-color: lightsteelblue;
}
.footer {
  clear: both;
}
</style>
<body>
    <div class="header">header</div>
    <div class="content">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

§ 双飞翼布局

面试高频指数：★★★★☆

双飞翼布局由淘宝UED发扬，是通过浮动和定位实现三栏布局的一种方案之一

双飞翼布局的特点：

上下为通栏，下通栏清浮动
中间为三栏布局，子元素按中左右的顺序浮动float:left
- 宽度
  - 左边栏宽度固定 = 中间内容子元素左外边距margin-left
  - 右边栏宽度固定 = 中间内容子元素右外边距margin-right
  - 中间内容宽度 = 100%
- 位置
  - 左边栏左外边距margin-left: -100%
  - 右边栏左外边距margin-left:-宽度

双飞翼布局

<style>
body { margin: 0; }
div {
  text-align: center;
  color: #fff;
}
.header, .footer {
  height: 50px;
  background-color: pink;
  line-height: 50px;
}
.content > div {
  float: left;
  height: 500px;
  line-height: 500px;
}
.center {
  width: 100%;
  background-color: mediumturquoise;
}
.inner {
  height: 500px;
  margin-left: 200px;
  margin-right: 150px;
}
.left {
  margin-left: -100%;
  width: 200px;
  background-color: skyblue;
}
.right {
  margin-left: -150px;
  width: 150px;
  background-color: lightsteelblue;
}
.footer {
  clear: both;
}
</style>
<body>
    <div class="header">header</div>
    <div class="content">
        <div class="center">
            <div class="inner">center-inner</div>
        <div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>