你不知道的三列布局之圣杯布局和双飞翼布局（超详细）

前言

三列布局相信大家都见过，像上面淘宝、豆瓣等很多平台界面都有使用。他们用到的是圣杯布局和双飞翼布局。圣杯布局和双飞翼布局是一些大厂可能问的问题，圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局。在讲这两种布局之前，我们还可以思考一下还有什么方法能做到三列布局吗？

float浮动实现三列布局

首先，我们肯定要要先定义3个div，分别放left、middle、right。

  <div id="left">
    left
  </div
  ><div id="right">
    right
  </div>
  <div id="middle">
    middle
  </div>

然后用float让left、right脱离文档流，并且是一个向左浮动，一个向右浮动，为了方便观察给3个盒子都定义一个背景色，并且给left和right定义高度和宽度。

#left,#right{
   
  width: 200px;
  height: 200px;
  background: red;
}
#middle{
   
  height: 200px;
  background: green;
}
#left{
   
  float: left;
}
#right{
   
  float: right;
}

这时你会发现right会掉下来

为什么会这样呢？
因为我们没给middle宽度，默认占据整行宽度，所以上面已经满了，right浮不上去。那我们应该怎么办呢？我们只要简单的变动一下html就能解决了。

<div id="left">
    left
  </div
  ><div id="right">
    right
  </div>
  <div id="middle">
    middle
  </div>

虽然float实现了三列布局但是他有很大的缺点：

• 我们要知道float的本质是去解决文字环绕图片，所以我们在body里面写一些文字，会将未浮动的middle挤下去。问题就很明显了。