圣杯布局

##圣杯布局
学css布局时，经常听说圣杯布局，我的第一篇文章，就来微言圣杯布局
首先先把基本的div先出来

<div id = "head">我是头部</div>
   <div id = "conten">
   	<div class= " float mian"> 我是mian</div>
   	<div class= " float left"> 我是左边</div>
   	<div class= " float right">我是右边</div>
   </div>
   <div id = "footer"我是尾部></div>

这时候要注意一点，把div .mian放在最前面
然后给DIV添加样式

#head{
	height: 100px;
	background-color: blue;
}
#conten{
   	padding-right: 100px;
}
.left{
	width: 100px;
  		height: 200px;
  		background-color: red;
}
.right{
	width: 100px;
   	height: 200px;
   	background-color: green;
}
.mian{
	width: 100%;
	height: 200px;
	background-color: #D6D4DA;
}
#footer{
	height:100px;
	background-color: chocolate;
}

页面实现

接下来把左边、右边、main三个div都浮动，出现以下情况

这时候尾部被挡住了，因为上面的div都浮动了，脱离了文档流，所以要去除浮动，给父元素conten添加样式

	#conten{
   		overflow: auto;
}

然后给conten加一个左右内边距，（重点是左右内边距的距离要等于左右div 的宽度）
添加样式

#conten{
	    padding-left: 100px;
   		padding-right: 100px;
}

接下来就是用margin负边距,让左右边div跑到mian上面去

.left{
  			left: -100px
}
.right{
   		margin-right: -100px;
}

用margin负边距，是让左右div跑上去的关键点（关于margin负值有机会在细细讨论）
如上图，这时候左边div挡住了main了，所以要给左边div定位，让它跑到最左边

.left{  
	left: -100px;
    position: relative;
    }

这时候圣杯布局就出来了～～