实现圣杯布局有2中方法：
1、flex布局：（推荐）
爸爸直接上代码:
<h4>header</h4>
</header>
<section>
<div class="left">
<h4>left</h4>
</div>
<div class="middle">
<h4>middle</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</section>
<footer>
<h4>footer</h4>
</footer>
下面是CSS代码：
html, body{ padding: 0; margin: 0; text-align: center;}
header, footer{ border: 1px solid #333; background: #ccc;}
section{ display: flex;}
.left{ width: 200px; background: red;}
.middle{ flex: 1; background: green;}
.right{ width: 200px; background: blue;}
2、浮动非主流（float）
HTML代码：需要把middle放在最前面
<header>
<h4>header</h4>
</header>
<section>
<div class="middle">
<h4>middle</h4>
</div>
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</section>
<footer>
<h4>footer</h4>
</footer>
上样式：
html, body{
padding: 0;
margin: 0;
text-align: center;
}
header, footer{
border: 1px solid #333333;
background: #CCCCCC;
}
footer{
clear: both;
}
section{
/* 给left和right空出位置 */
padding: 0 200px 0 200px;
overflow: hidden;
}
.left, .middle, .right{
position: relative;
float: left;
}
.middle{
width: 100%;
background: green;
}
.left{
/* 让left回到上一行最左侧 */
margin-left: -100%;
/* 让left回到最左侧 */
left: -200px;
width: 200px;
background: red;
}
.right{
margin-left: -200px;
right: -200px;
width: 200px;
background: blue;
}
下面是效果图，效果是一样的！
11221190629.png
