CSS布局
两种布局的历史由来
圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：
原理：双飞翼布局是一种常用的三栏布局，它使用CSS浮动和负外边距来实现。该布局的特点是，主要内容在HTML结构中位于最前面，侧边栏在主要内容的左右两侧，且主要内容部分可以自适应宽度，侧边栏固定宽度。
代码结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
*{
padding: 0;
margin: 0;
}
header{
height: 60px;
background-color: plum;
}
.main{
width: 100%;
background-color: paleturquoise;
height: calc(100vh - 120px);
float: left;
}
.center{
margin: 0 200px;
background-color: paleturquoise;
}
.left{
float: left;
width: 200px;
margin-left: -100%;
height: calc(100vh - 120px);
background-color: palevioletred;
}
.right{
float: left;
width: 200px;
margin-left: -200px;
height: calc(100vh - 120px);
background-color: purple;
}
footer{
height: 60px;
clear: both;
background-color: palegreen;
}
</style>
</head>
<body>
<!-- 双飞翼布局的实现 -->
<header>头部</header>
<!-- 中间区域先加载所以写在上面 -->
<div class="main">
<div class="center">主区域</div>
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
<footer>底部</footer>
</body>
</html>
运行效果：
圣杯布局
代码结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.clearfix{
height: calc(100vh - 120px);
padding: 0 200px;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.to-float{
float: left;
}
header{
width: 100%;
height: 60px;
background-color: palegoldenrod;
}
footer{
width: 100%;
height: 60px;
background-color: palegreen;
}
.center{
width: 100%;
height: 100%;
background-color: papayawhip;
}
.left{
width: 200px;
height: 100%;
margin-left: -100%;
position: relative;
left: -200px;
background-color: palevioletred;
}
.right{
width: 200px;
height: 100%;
margin-right: -200px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<header>头部</header>
<div class="clearfix">
<div class="center to-float">中间区域</div>
<div class="left to-float">左边栏</div>
<div class="right to-float">右边栏</div>
</div>
<footer>底部</footer>
</body>
</html>
运行效果：
参考文章：CSS 圣杯布局和双飞翼布局的理解与思考
