首先两个布局是有共性的：
with：100%的浮动块和另外两个定宽浮动块通过负外边距和相对定位的方法实现最终布局，因此涉及到的方法包括：浮动、负外边距和相对定位其次同样的实现效果之所以有两个名字，本质上是因为实现思路不一样，导致DOM结构不一样。
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
上边一个header，下边一个footer，中间一个容器，三个列的结构都写在这个容器里。
此时可以用这个container容器的左右内边距(padding)确定中间列的位置，并给左右两列留出空间。但是由于左右两列也包含在这个container容器中，所以他们也跟着被推到了中间，就像这样：
因此在使用负外边距的方法将三个浮动块放到一行之后，还需要用相对定位将左右两个块放到最终位置。
width：100%，使用中间列的左右外边距(margin)确定位置，并留出左右空间，DOM结构如下：<div id="container">
<div id="middle" class="basic">middle</div>
</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>在这样的结构下，左右两列没有跟着被推到中间，因此只需要使用负外边距就可以实现最终布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<link rel="stylesheet" href="holygrail.css">
</head>
<body>
<header class="basic">header</header>
<div id="container">
<div id="middle" class="basic">middle</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>
</div>
<footer class="basic">footer</footer>
</body>
</html>CSS样式：
body {
margin: 0;
}
.basic {
height: 50px;
text-align: center;
line-height: 50px;
}
header {
background-color: aquamarine;
}
footer {
background-color: burlywood;
clear: left;
}
#container {
padding: 0 300px 0 200px;
}
#middle {
background-color: chartreuse;
width: 100%;
float: left;
}
#left {
background-color: hotpink;
width: 200px;
float: left;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
background-color: silver;
width: 300px;
float: left;
margin-right: -300px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<link rel="stylesheet" href="flying-wing.css">
</head>
<body>
<header class="basic">header</header>
<div id="container">
<div id="middle" class="basic">middle</div>
</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>
<footer class="basic">footer</footer>
</body>
</html>CSS样式：
body {
margin: 0;
}
.basic {
height: 50px;
text-align: center;
line-height: 50px;
}
header {
background-color: aquamarine;
}
footer {
background-color: burlywood;
clear: left;
}
#container {
width: 100%;
float: left;
}
#middle {
background-color: chartreuse;
margin: 0 300px 0 200px;
}
#left {
background-color: hotpink;
width: 200px;
float: left;
margin-left: -100%;
}
#right {
background-color: silver;
width: 300px;
float: left;
margin-left: -300px;
}原文：https://www.cnblogs.com/lixiang12/p/10434596.html