圣杯布局（三行三列布局）
布局效果类似圣杯，所以叫圣杯布局。
就是三行三列布局
核心：主要就是实现中间主体部分中的
左右定宽 + 中间自适应的布局效果
.left,
.right,
.center {
height: 300px;
}
/*左右定宽*/
.left,
.right {
width: 300px;
}
.left {
background-color: chocolate;
/*左浮动*/
float: left;
}
.center {
background-color: cornsilk;
margin-left: 300px;
margin-right: 300px;
}
.right {
background-color: darkgrey;
float: right;
}
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
/*改变顺序，需要把center放到最后*/
注意：可能对搜索引擎不友好，因为搜索引擎是按照顺序抓取数据的
优化
对主体外套一个父元素，为父元素设置高度，再设置左右内边距，大小同两边定宽的宽度相等。
对
left，center，right都设置float: left;，把center的宽度设置为100%（也就是父元素的相同宽度）。再用
margin-left和设置position: relative;后可使用的left和right把左右两个定宽元素移动到理想位置。记得对定宽元素设置宽度
.left,
.right,
.center {
height: 300px;
float: left;
}
.left,
.right {
width: 300px;
}
.left {
background-color: chocolate;
/*将当前元素从当前行，移动上一行同一个位置*/
margin-left: -100%;
position: relative;
/*将当前元素移动到理想位置*/
left: -300px;
}
.center {
background-color: aquamarine;
/*宽度为父元素的100%*/
width: 100%;
/* margin-left: 300px;
margin-right: 300px; */
}
.right {
background-color: darkgrey;
margin-left: -300px;
position: relative;
right: -300px;
}
.parent {
height: 300px;
/*为左右元素空出位置*/
margin-left: 300px;
margin-right: 300px;
}
<div class="parent">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
