CSS 圣杯布局的多种实现方式，以及各种方法的优缺点总结。

关于圣杯布局的提问？

实现下图布局，Header 和 Footer 固定高度 100px，Left 和 Right 固定宽度 200px，Middle 部分的宽度自适应。

圣杯布局的实现？

1. flex

[代码实现]

重点在与 main 中设置 display 为 flex，left 、right 定宽设置为 200px，middle 设置 flex: 1 即可

    <header>Header</header>
	<main>
		<div class="left">Left</div>
		<div class="middle">Middle</div>
		<div class="right">Right</div>
	</main>
    <footer>Footer</footer>

header, footer {
    width: 100%;
	height: 100px;
	background: rgb(251, 84, 48);
}
main {
	display: flex;
	background-color: rgb(109, 110, 106);
}
.left {
	width: 200px;
	height: 400px;
	background-color: rgb(253, 214, 99);
}
.middle {
	flex: 1;
	height: 400px;
	background-color: rgb(78, 187, 252);
}
.right {
	width: 200px;
	height: 400px;
	background-color: rgb(30, 215, 209);
}

[优缺点]

使用 flex 写圣杯布局特别简单，而且缩放到最小也不会变形。

但是 flex 会有有浏览器兼容性问题，可以在网站  https://caniuse.com/?search=flex  查看支持，可以看到，其实大部分浏览器都支持了 flex，重点还是在 IE 上。

2. float 布局一

[代码实现]

left、right 使用 float 向左右浮动，脱离文档流。middle 通过 margin-left 和 margin-right 使得内容不被 left 、right 遮挡。

    <header>Header</header>
	<main>
		<div class="left">Left</div>
		<div class="right">Right</div>
		<div class="middle">Middle</div>
	</main>
    <footer>Footer</footer>

html, body {
    margin: 0;
	padding: 0;
	color: #FFF;
	text-align: center;
}
header, footer {
	width: 100%;
	height: 100px;
	background: rgb(251, 84, 48);
}
.left {
	float: left;
	width: 200px;
	height: 400px;
	background-color: rgb(253, 214, 99);
}
.middle {
	margin: 0 200px;
	height: 400px;
	background-color: rgb(78, 187, 252);
}
.right {
	float: right;
	width: 200px;
	height: 400px;
	background-color: rgb(30, 215, 209);
}

[优缺点]

middle 在 html 结构中放在最后，这样有什么影响呢？

1. 不利于SEO优化，搜索引擎抓取html 的顺序是从上到下，有的搜索引擎对抓取的长度有限制，所以最好把重要的内容放前面；

2. 读屏软件按照标签顺序进行读屏

3. 样式按顺序加载，样式加载慢的情况下当然是先加载主要内容的样式更好

3. float 布局二

为了解决上面的问题，以同样的思路进行思考，可以将 middle 放到最上面，这时候 left right 脱离文档流排在 middle 下方，此时我们再利用 position: relative; top: -高度; 将 left right 上移。

[代码实现]

    <header>Header</header>
	<main>
		<div class="middle">Middle</div>
		<div class="left">Left</div>
		<div class="right">Right</div>
	</main>
    <footer>Footer</footer>

html, body {
    margin: 0;
	padding: 0;
	color: #FFF;
	text-align: center;
}
header, footer {
	width: 100%;
	height: 100px;
	background: rgb(251, 84, 48);
}
.left, .right {
	position: relative;
	top: -400px;
}
.left {
	float: left;
	width: 200px;
	height: 400px;
	background-color: rgb(253, 214, 99);
}
.middle {
	margin: 0 200px;
	height: 400px;
	background-color: rgb(78, 187, 252);
}
.right {
	float: right;
	width: 200px;
	height: 400px;
	background-color: rgb(30, 215, 209);
}

！根据 float 两种实现方式，可以再进行各种拓展，实现方式多种多样，思路是一致的。

4. 绝对定位

[代码实现]

    <header>Header</header>
	<main>
		<div class="middle">Middle</div>
		<div class="left">Left</div>
		<div class="right">Right</div>
	</main>
    <footer>Footer</footer>

        html, body {
			margin: 0;
			padding: 0;
			color: #FFF;
			text-align: center;
		}
		header, footer {
			width: 100%;
			height: 100px;
			background: rgb(251, 84, 48);
		}
		main {
			position: relative;
		}
		.left, .right {
			position: absolute;
			top: 0;
		}
		.left {
			left: 0;
			width: 200px;
			height: 400px;
			background-color: rgb(253, 214, 99);
		}
		.middle {
			margin: 0 200px;
			height: 400px;
			background-color: rgb(78, 187, 252);
		}
		.right {
			right: 0;
			width: 200px;
			height: 400px;
			background-color: rgb(30, 215, 209);
		}

5. 利用 calc 计算属性

left、middle、right均浮动，中间宽度设置为 100% - 两边宽度和，非常清晰易懂，父容器main清除浮动。

[代码实现]

    <header>Header</header>
	<main>
		<div class="left">Left</div>
		<div class="middle">Middle</div>
		<div class="right">Right</div>
	</main>
	<footer>Footer</footer>

        html, body {
			margin: 0;
			padding: 0;
			color: #FFF;
			text-align: center;
		}
		header, footer {
			width: 100%;
			height: 100px;
			background: rgb(251, 84, 48);
		}
		main {
			overflow: hidden;
		}
		.left, .right, .middle {
			float: left;
		}
		.left {
			width: 200px;
			height: 400px;
			background-color: rgb(253, 214, 99);
		}
		.middle {
			width: calc(100% - 400px);
			height: 400px;
			background-color: rgb(78, 187, 252);
		}
		.right {
			width: 200px;
			height: 400px;
			background-color: rgb(30, 215, 209);
		}

注意：calc 计算属性计算符号两边需要有空格，同 flex 布局一样，也存在兼容性问题，可以在上面提到的网站查看

6. Table 布局

main 设置 display: table; width: 100%; 子元素按顺序排列，设置display:table-cell 就好了

[代码实现]

    <header>Header</header>
	<main>
		<div class="left">Left</div>
		<div class="middle">Middle</div>
		<div class="right">Right</div>
	</main>
	<footer>Footer</footer>

        html, body {
			margin: 0;
			padding: 0;
			color: #FFF;
			text-align: center;
		}
		header, footer {
			width: 100%;
			height: 100px;
			background: rgb(251, 84, 48);
		}
		main {
			display: table;
			width: 100%;
		}
		.left, .right, .middle {
			display: table-cell;
		}
		.left {
			width: 200px;
			height: 400px;
			background-color: rgb(253, 214, 99);
		}
		.middle {
			height: 400px;
			background-color: rgb(78, 187, 252);
		}
		.right {
			width: 200px;
			height: 400px;
			background-color: rgb(30, 215, 209);
		}

---

交流前端问题可 + vx : zoe1997233    欢迎大家指出问题~