本篇内容源自：www.cnblogs.com/star91/p/57…
圣杯布局
圣杯长这样式儿：
所以圣杯布局就是中间为主体，两边有俩小耳朵。
html内容
<div class="header">header</div>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
为了让中间内容优先被浏览器渲染，所以将main盒子靠前放置
CSS内容
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.left,.main,.right{
min-height: 130px;
}
.container{
border:2px solid yellow;
}
.left{
width:200px;
background:red;
}
.right{
width:220px;
background:green;
}
.main{
background:blue;
}
浏览器中就是这个样子：
然后给左中右盒子设置浮动
.left,.main,.right{
float: left;
}
效果就是这样，显而易见出现高度塌陷问题
所以我们要解决浮动问题
.container{
border: 2px solid yellow;
overflow: hidden;
}
.footer{
clear: both;
}
给container加上overflow:hidden触发BFC闭合（方法很多，可查）浮动，给footer加上clear属性清除浮动。
BFC属于普通流
1.可以看做是隔离的独立容器，容易里面的元素不会在布局上影响到其他的元素。
2.可以用于清除子元素的浮动。
3.防止元素被浮动元素覆盖
然后给main盒子设置宽度。让它可以占满一整行
.main{
width: 100%;
background: blue;
}
效果就变成这样了
为了让他们在一行，我们使用负margin操作
.left{
margin-left: -100%;
width: 200px;
background: red;
}
.right{
margin-left: -220px;
width: 220px;
background: green;
}
左盒子进行左外边距-100%的设置，意思就是向左移动了父元素的100%
这时右盒子移动到第二排最左边贴着边框，再对右盒子进行负220px（本身宽度）的设置，就能让他左移一个宽度位置，就是直接移到第一行右边
但是，中间蓝盒子被覆盖掉一部分，即会出现蓝色盒子左侧内容被红色盒子覆盖的问题，所以还需要进行消除覆盖的设置
办法就是给容器添加左内边距和右内边距，左右宽度分别为红盒子和绿盒子的宽度
.container{
border: 2px solid yellow;
padding:0 220px 0 200px;
overflow: hidden;
}
由于left、main、right三个部分都被container包裹着，所以给其添加内边距，三个子元素会往中间挤。貌似还是没有修复问题，别着急，我们已经在container的左右两边留下了相应宽度的留白，只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动left和right部分。(具体使用部分在盒子讲解有提到)
.left,.main,.right{
position: relative;
float: left;
min-height: 130px;
}
.left{
margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
.right{
margin-left: -220px;
right: -220px;
width: 220px;
background: green;
}
最终效果如下
双飞翼布局
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样。
html内容
<div class="header">header</div>
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
CSS内容
双飞翼布局的前五步和圣杯布局完全相同，我们只需要修改第六步，前面是设置container的内边距以及相对定位来解决这个覆盖问题的，双飞翼布局中，为了main内容不被遮挡，在main里面添加一个子元素content来显示内容，然后设置content的margin-left和margin-right为左右两栏div留出位置。
*{margin: 0;padding: 0;font-size: 20px;color: white}
body{min-width: 700px;} /*body部分最少700px宽*/
.header,.footer{
border: 1px solid yellow;
background: gray;
text-align:center; /*水平居中*/
}
.left,.main,.right{height: 130px;}
.container{
border:2px solid yellow; /*左中右的盒子*/
}
.left{
width:200px;
background:red;
}
.right{
width:200px;
background:green;
}
.main{
background:blue;
}
/*下面是双飞翼布局*/
.main,.right,.left{float: left;}
.container{overflow: hidden;}
.footer{clear: both;}
.main{width: 100%}
.left{margin-left: -100%}
.right{margin-left: -200px;}
效果是这样：
区别在于：
- 双飞翼布局没有position的设置，但是通过内盒子的外边距进行填充
