两/三栏布局(圣杯双飞翼)

常用的页面布局（两栏布局、三栏【圣杯、双飞翼】布局）

1.两栏布局，左边定宽高，右边自适应
左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响
2.三栏布局，圣杯布局，双飞翼布局
原来我做的主要是后台管理和一些移动端的项目，这两种布局呢是我原来查阅资料时看到的，所以就做了个简单的理解。
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。
两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

圣杯布局来源于一篇文章，而双飞翼布局来源于淘宝的UED，虽然两者的实现方法略有差异，不过都是遵循了以下要点：

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列称为最高列
• 只需要使用一个额外的<div>外层标签

圣杯布局

1.DOM结构

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先我们要先定义整个布局的DOM结构，主体部分是由container包裹的center，left，right三列。
其中center定义在最前面。
1.要给两侧设置padding预留出相应的空间
2.随后分别为三列设置宽度与浮动，同时对footer设置清除浮动
3.根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行
4.接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距
5.这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置
6.接下来放置right，只需添加一条声明即可
7.至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px

双飞翼布局

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

总结与思考

通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。