经典三列圣杯布局、双飞翼布局

圣杯布局、双飞翼

圣杯布局、双飞翼布局是经典的三栏式布局，都是两边宽度固定，中间宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染，两种布局的实现方法前半部分相同，后半部分的实现各有利弊，下面会简单介绍两者的区别。

源码

圣杯布局 代码、demo 

双飞翼布局 代码、demo

圣杯布局

• 两边固定、中间自适应
• 中间最先渲染
• 三列等高布局

根据如上面的需求很快写下如下html结构

<header>我是头部</header>
<main class="clearFloat">
  <div class="middle">middle
    <p>middlemiddle</p>                     <p>middlemiddle</p>     
    <p>middlemiddle</p>
    <p>middlemiddle</p>
    <p>middlemiddle</p>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</main>
<footer>我是底部</footer>

css 思路

• 布局：有头，有尾，有内容，middle要放在main的最前部分，然后是left，reight。
• 浮动让三个div在一行，出现高度塌陷，clearFloat 清浮动。
• middle 宽度设为100%占满空间，三个div按照float 依次排列。
• left 要放到main的左边，float 是依次排列，位置不够换行显示，所以需要设置margin-left: -100%,因为margin的百分比是相对与父元素，所以需要整整一行的宽度。
• right 要放到main的右边，同理需要设置margin-right的值为负的right的宽。
• middle 的内容被left、right存在重叠未完全显示，所以我们需要设置父容器main 的padding，即可以理解为中间栏给左右两边的留位置出来。
• 上面middle的内容已经可以正常显示出内容，但是left 还是跟middle 存在重叠，left没有到最左边，所以用定位向左移动left的宽度。

* {
  padding: 0;
  margin: 0;
}
body {
 box-sizing: border-box;
}

header,footer {
  font-size:14px;
  height: 50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
main {
  padding: 0 150px 20px 200px;
  overflow: hidden;
}
main > div {
  float: left;
  text-align:center;
  padding-top:20px;
  padding-bottom: 10000px; // 实现等高
  margin-bottom: -10000px;// 实现等高
}
.clearFloat:after{
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.clearFloat{
    zoom: 1;
}
.middle {
  width: 100%;
  background-color:#0e99cd;
}
.left {
  width: 200px;
  background:#72cdef;
  margin-left: -100%; // 第一行且靠左
  position: relative; // 给left推到左边
  left: -200px;
}
.right {
  width: 150px;
  background:#72cdef;
  margin-right:-150px; // 靠右
}

问题

正常情况下是没有问题，但是特殊情况下就会有问题，如果将浏览器无线放大时，如图，当main部分的宽小于left部分时就会发生布局混乱。当中间的宽度小与左边的宽度时布局会错乱

双飞翼布局 

圣杯布局和双飞翼布局前一半相同，三个盒子都是float浮动，以形成三栏布局。不同在于解决 中间自适应的盒子内容不被左右盒子遮挡问题思路不一样。

html 结构如下：

<header>我是双飞翼头部</header>
<main class="clearFloat">
  <div class="middle">middle
    <section class="middle-wrap">
      <p>middlemiddle</p>
      <p>middlemiddle</p>
      <p>middlemiddle</p>
      <p>middlemiddle</p>
    </section>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</main>
<footer>我是双飞翼底部</footer>

在middle 里面加了一层盒子，并且设置了这层盒子的外边距

* {
  padding: 0;
  margin: 0;
}
body {
 box-sizing: border-box;
}

header,footer {
  font-size:14px;
  height: 50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
main {
  overflow: hidden;
  position:relative;
}
main > div {
  float: left;
  text-align:center;
  padding-top:20px;
  padding-bottom: 10000px; // 实现等高
  margin-bottom: -10000px;// 实现等高
}
.clearFloat:after{
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.clearFloat{
    zoom: 1;
}
.middle {
  width: 100%;
  background-color:#0e99cd;
}
// 自身远离左右两边
.middle-wrap {
  margin: 0 150px 0 200px;
}
.left {
  width: 200px;
  background:#72cdef;
  margin-left: -100%; // 推到第一行且靠左
}
.right {
  width: 150px;
  background:#72cdef;
  margin-left:-150px; // 靠右
}

区别

处理中间盒子被遮挡思路不一样

圣杯布局是为三个元素的父元素加上padding属性，为左右两边腾开位置，左边两边通过定位来确定位置

双飞翼布局是在加一层盒子，设置这层盒子的左右外边距，左右两边通过负的margin来定位

其他三列布局或者多列布局

flex、gird 等都是不错的解决方案

• left要放到main的左边，设置margin-left: -100%,因为margin的百分比是相对与父元素的，所以需要整整一行的宽度才能补偿这个margin的值，所以left就能到main的左边。