由圣杯布局到双飞翼布局引发的思考

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局的共同点

1. 三栏布局；
2. 主要内容写在前面，最先载入，但布局位于非最前
3. 两侧定宽，分别位于中间主体两侧（外），中间流式（自动宽度）

布局原理

1. 三栏全部采用浮动（float: left）；
2. HTML内容出现顺序：main、left、right，要求首先载入主体（重要）内容，然后加载侧边栏；
3. （左）负边距（margin-left）超过元素自身宽度时（第二个浮动元素），即使父元素“容不下”2个浮动元素（第二个浮动元素会换行），第二个浮动元素也会移动到实际显示位置相邻的兄弟元素旁（父元素最右内侧），并占据一定空间，相当于“margin-left可以吃掉兄弟元素的margin”。当margin-left等于父元素宽度时，会移动到父元素最左侧（内侧）

圣杯布局

HTML页面代码

  

    
Main Content
    
Left Side
    
Right Bar
  

那么现在的要求是main位于中间，且适应容器宽度，left和right分别位于main两侧，三栏位于同一行。

基本CSS代码

.container {
  color: #fff;
}
.main {
  float: left;
  background-color: #f00;
  height: 200px;
  
  width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */
}
.left {
  float: left;
  height: 200px;
  background-color: #0f0;

  width: 200px;
  margin-left: -100%; /* Float to left */
}
.right {
  float: left;
  height: 200px;
  background-color: #00f;

  width: 250px;
  margin-left: -250px; /* Float to right */
}

效果如下图

但注意到main中内容已经被遮挡（默认text-align: left）。

圣杯布局给出的思路是为两侧设置相对定位（position: relative），同时为父元素（container）设置两侧留白（padding），为两侧留出空间，即可实现两侧与main分离。

圣杯布局CSS代码

.container {
  color: #fff;

  padding: 0 250px 0 200px; /* 为两侧留白 */
}
.main {
  float: left;
  background-color: #f00;
  height: 200px;
  
  width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */
}
.left {
  float: left;
  height: 200px;
  background-color: #0f0;

  width: 200px;
  margin-left: -100%; /* Float to left */

  position: relative;
  left: -200px; /* 找回自身空间 */
}
.right {
  float: left;
  height: 200px;
  background-color: #00f;

  width: 250px;
  margin-left: -250px; /* Float to right */

  position: relative;
  right: -250px; /* 找回自身空间 */
}

效果如下图

双飞翼布局

圣杯布局使用了负边距+相对定位方式，不添加任何额外HTML代码，然而相对定位对性能有影响，考虑到实际应用情况，淘宝UED对此进行了优化，遗弃相对定位，具体做法是为main添加额外的包裹标签。

双飞翼布局HTML代码

  

    
Main Content
    
Left Side
    
Right Bar
  

添加wrap元素

.container {
  color: #fff;

  /*padding: 0 250px 0 200px;*/
}
.main {
  float: left;
  background-color: #f00;
  height: 200px;
  
  width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */
}
.left {
  float: left;
  height: 200px;
  background-color: #0f0;

  width: 200px;
  margin-left: -100%; /* Float to left */

  /*position: relative; */
  /*left: -200px; */
}
.right {
  float: left;
  height: 200px;
  background-color: #00f;

  width: 250px;
  margin-left: -250px; /* Float to right */

  /*position: relative;*/
  /*right: -250px; */
}
.wrap {
  padding: 0 250px 0 200px;
}

达到的效果与之前一致

浮动+负边距布局引申

我们要解决的问题是，主要内容先载入，也就是HTML代码写在前面，而显示在页面的中部（非最前面）。 既然负边距可以将浮动元素上移，那么我想就可以创造出这样一种布局方式：

HTML代码如下

  

    
content tip
    
main
    
col1
    
col2
  

CSS代码如下

.tip {
  float: left;
  width: 100%;
}
.main {
 float: left;
 width: 50%;
 margin-left: -75%;
}
.col1 {
  float: left;
  width: 25%;
  margin-left: -100%;
}
.col2 {
  float: left;
  width: 25%;
  margin-left: -25%;
}

最终创建出3栏自适应宽度布局，数值可自行调整，tip元素内容不可见，可用来提高Accessibility，效果如下

效果都是主要内容显示在非最前位置，据此可创建出N列自适应布局，不足的地方是最前面需要额外的但不可或缺的宽度100%的浮动元素。

然而创建多列布局的方式有很多，比如采用定位方式，BFC方式等，各有各的用途，带来的思考才是问题的意义。

欢迎交流。