圣杯布局和双飞翼布局.md

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是实现三栏布局的方法，左右定宽，中间自适应，是很常见的布局，其原理差不多，都有负边距的应用。由于页面渲染dom是从上到下，从左到右依次读取dom结构，所以当三栏布局需要优先渲染中间的元素的时候，就需要用到这两种布局方法。

圣杯布局和双飞翼布局用到以下属性：

• margin padding
• position relative left right
• float
• BFC
• 等高
• 盒子模型

常规布局方式

<div class="header"></div>
<div class="content">
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>
</div>
<div class="footer"></div>

圣杯布局

HTML

<div class="header"></div>
<div class="content">
	<div class="middle">middle</div>
	<div class="left">left</div>
	<div class="right">right</div>
</div>
<div class="footer"></div>

CSS

.header {
	width: 100%;
	height: 30px;
	background: red;
}
.content {
	overflow: hidden;
	padding: 0 100px;
}
.footer {
	width: 100%;
	height: 30px;
	background: red;
}
.middle {
	position:relative;			
	width: 100%;
	float: left;
	height: 80px;
	background: #8BC34A;
}
.left {
	position:relative;
	width: 100px;
	float: left;
	left:-100px;
	height: 80px;
	margin-left: -100%;
	background: yellow;
}
.right {
	position:relative;			
	width: 100px;
	float: left;
	right:-100px;
	height: 80px;
	margin-left: -100px;
	background: pink
}

双飞翼布局

HTML

<div class="header"></div>
<div class="content">
	<div class="middle"> 
		<div class="inner-middle">inner-middle</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
</div>
<div class="footer"></div>

CSS

.header {
  width: 100%;
  height: 30px;
  background: red;
}
.content {
  overflow: hidden;
}
.footer {
  width: 100%;
  height: 30px;
  background: red;
}
.middle {			
  width: 100%;
  float: left;
}
.inner-middle{
  height: 80px;
  margin: 0 100px;
  background: #8BC34A;		
  word-break: break-all;	
}
.left {
  width: 100px;
  float: left;
  height: 80px;
  margin-left: -100%;
  background: yellow;
}
.right {			
  width: 100px;
  float: left;
  height: 80px;
  margin-left: -100px;
  background: pink
}

这两种布局方法目的是一样的，middle元素会优先渲染出来，被用户优先看到，都可以达到三栏布局的效果，不一样的地方在于圣杯布局利用了父元素content的padding属性从而给left和right元素留了空间， 双飞翼布局利用middle子元素inner-middle的marin属性给left和right元素腾出了空间。这两种布局方式都会产生浮动问题，我们可以用常规的清除浮动方法，也可以利用 overflow: hidden (根据BFC的知识) 来包含浮动的高度，从而避免content高度塌陷。