圣杯布局与双飞翼布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

圣杯布局

圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染。也就是在html文档中，中间的部分要写在左右布局之前。
当然，这种布局是面向PC端的，移动端由于屏幕宽度较小，不推荐多列布局。

DOM结构

<div class="box">
		<div class="left"></div>
		<div class="search"></div>
		<div class="login"></div>
</div>

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 80%;
			height: 100px;
			background-color: #ccc;
			margin: 160px auto;
			position: relative;
		}

		.left {
			width: 100px;
			height: 100px;
			background-color: pink;
			/*float: left;*/
			position: absolute;
			left: 0;
			top: 0;
		}

		.login {
			width: 100px;
			height: 100px;
			background-color: #ff3040;
			/*float: right;*/
			position: absolute;
			right: 0;
			top: 0;
		}

		.search {
			/*width: 100%;*/
			height: 100px;
			background-color: cyan;
			/*float: left;*/
			margin: 0 110px;
		}
	</style>

双飞翼布局

给中间部分在套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现上面变的特别窄布局会乱掉的问题。

  <style>
    .left, .main,.right {
      float: left;
      text-align: center;
      min-height: 500px;
    }
    .left {
      width: 200px;
      background-color: rgb(204, 245, 224);
      margin-left: -100%;
    }
    .right {
      width: 300px;
      background-color: rgb(200, 226, 244);
      margin-left: -300px;
    }
    .main {
      width: 100%;
      background-color: rgb(233, 193, 215);
    }
    .content {
      margin: 0 300px 0 200px;
    }
  </style>

	<div class="container"> 
	    <div class="main">
	      <div class="content">main</div> 
	    </div>
	    <div class="left">left</div> 
	    <div class="right">right</div> 
    </div>

两种布局实现方式对比

两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位。
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整。