圣杯布局
不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。
1.给类名为"container"的盒子添加"overflow: hidden"和"padding: 0px 100px"属性，以为了防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置。需要注意的是，当中间内容区域的宽度小于左、右盒子的宽度时，整个布局就会混乱，所以为了避免这种情况，2.再给容器盒子添加"min-width: 100px"属性，保证圣杯布局正确、有效。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
overflow:hidden;
padding:0 100px;
min-width:100px;
border: 1px solid black;
}
.left {
background-color: greenyellow;
}
.center {
background-color: darkorange;
}
.right {
background-color: darkgreen;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><br /><br /><br /></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
3.三栏都设置 "float: left"，浮动，保证之后的"margin-left"属性可以将自身拉到上一行，4.设置每栏宽度，中间栏的宽度成父容器的100%
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
overflow:hidden;
padding:0 100px;
min-width:100px;
border: 1px solid black;
}
.left {
float:left;
width:100px;
background-color: greenyellow;
}
.center {
float:left;
width:100%;
background-color: darkorange;
}
.right {
float:left;
width:100px;
background-color: darkgreen;
}
</style>
为两侧侧边栏加上负margin,用以调整位置。其中5.左边栏设为"margin-left: -100%"，该属性可以将元素向左移动属性值的单位，100%相对于父容器计算.而右边栏的6.margin-left则为负的其自身宽度,将右盒子向上拉一行并且再向右移动自身宽度进入"padding-right"区（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
overflow:hidden;
padding:0 100px;
min-width:100px;
border: 1px solid black;
}
.left {
float:left;
width:100px;
margin-left:-100%;
background-color: greenyellow;
}
.center {
float:left;
width:100%;
background-color: darkorange;
}
.right {
float:left;
width:100px;
margin-left:-100px;
background-color: darkgreen;
}
</style>
7.为左边栏和右边栏添加position:relative，然后对它们进行定位移动到两侧
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
overflow:hidden;
padding:0 100px;
min-width:100px;
border: 1px solid black;
}
.left {
float:left;
width:100px;
margin-left:-100%;
position:relative;
left:-100px;
background-color: greenyellow;
}
.center {
float:left;
width:100%;
background-color: darkorange;
}
.right {
float:left;
width:100px;
margin-left:-100px;
position:relative;
left:100px;
background-color: darkgreen;
}
</style>
最终代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
overflow:hidden;
padding:0 100px;
min-width:100px;
border: 1px solid black;
}
.left {
float:left;
width:100px;
margin-left:-100%;
position:relative;
left:-100px;
background-color: greenyellow;
}
.center {
float:left;
width:100%;
background-color: darkorange;
}
.right {
float:left;
width:100px;
margin-left:-100px;
position:relative;
left:100px;
background-color: darkgreen;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><br /><br /><br /></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
双飞翼布局
双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。
<body>
<section class="container">
<article class="center"><main class="main"><br /><br /><br /></main></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
首先1.给类名为"container"的盒子添加"overflow: hidden"属性，解决子浮动元素导致的高度塌陷问题。
然后继续给2.类名为"left"的盒子添加"float: left"、"margin-left: -100%"和"width: 100px"。
3.再给类名为"center"的盒子添加"float: left"和"width: 100%"属性，该盒子并没有像圣杯布局时添加"padding"属性那样。
4.继续给类名为"right"的盒子添加"float: left"、"width: 100px"和"margin-left: -100px"。
5.最后给类名为"main"的盒子添加"margin: 0px 100px"， 该属性为双飞翼布局的核心点，使用外边距将内容封锁在两边浮动元素的中间。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
overflow:hidden;
border: 1px solid black;
}
.left {
float:left;
margin-left:-100%;
width:100px;
background-color: greenyellow;
}
.center{
float:left;
width:100%;
}
.main {
margin:0 100px;
background-color: darkorange;
}
.right {
float:left;
width:100px;
margin-left:-100px;
background-color: darkgreen;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><main class="main"><br /><br /><br /></main></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
