圣杯布局（三行三列布局）

布局效果类似圣杯，所以叫圣杯布局。

就是三行三列布局

核心：主要就是实现中间主体部分中的左右定宽 + 中间自适应的布局效果

		.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>

---