‘display’、’position’ 和 ‘float’ 的相互关系
圣杯布局和双飞翼
什么是圣杯布局和双飞翼布局？
圣杯布局和双飞翼布局可实现两边宽度固定，中间宽度自适应，外部高度为三者中的最高高度的三列布局，当然，由扩展性这样的布局不仅仅只是三列，
圣杯布局
因为现有的技术全部都有缺点，要找到一种好的实现方法就像找到圣杯一样难。
双飞翼布局
是对圣杯布局的优化，先实现中间最重要的身体部分，再实现翅膀，所以叫双飞翼布局。
早期用table实现，现在不用了，因为table要等到页面加载完之后才渲染。table有一些略根性，这个我并不是很清楚，总之table并不推荐。
布局实现思路
1.因为中间的主体内容最重要，所以先加载它，所以html中middle放在最前面
2.他们三个要对其，先将middle设为全宽，让left和right浮动上去,并且一个在左一个在右。
3.让middle自适应宽度
4.外部高度为三者最高的高度
实现圣杯布局
先给出html的结构,为了方便观察，这里也给出了头部和脚部:
<body>
<header>
我是头部
</header>
<article>
<div class="middle">
我是中间
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
</div>
<div class="left">
我是左
</div>
<div class="right">
我是右
</div>
</article>
<footer>
我是底部，版权所有
</footer>
</body>
实现过程
首先给出相应的宽度和背景值，便于观察
header{
height: 150px;
background-color: #0099FF;
}
article{
/*height值只是为了方便看效果*/
height: 300px;
background-color: #924652;
}
footer{
height: 150px;
background-color: #CCCC33;
}
article .middle{
background-color: darksalmon;
}
article .left{
background-color: #65cca1;
width: 150px;
}
article .right{
background-color: #f786ff;
width: 200px;
}
先把中middle浮动上去,给他一个全宽，原有基础上添加
.middle{
float:left;
width:100%;
}
把left放到middle左边，原有基础上添加
.left{
float:left;
margin-left:-100%；
}
把right放到middle右边，原有基础上添加
.right{
float:left;
/*这里的150px为right的宽度*/
margin-left:-150px；
}
middle自适应，原有基础上添加
article{
padding-left: 150px;
padding-right: 100px;
}
article .left{
position: relative;
left: -150px;
}
article .right{
position: relative;
left: 100px;
}
外部高度为三者中最高，原有基础上添加为(不想全部为最大的高度，middle，right，left谁最高设谁的样式即可)
article .middle{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
article .left{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
article .right{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
article{
overflow: hidden;
}
圣杯布局全部代码：
*{
margin: 0;
padding: 0;
}
header{
height: 150px;
background-color: #0099FF;
}
article{
/*height: 300px;*/
background-color: #924652;
padding-left: 150px;
padding-right: 100px;
overflow: hidden;
}
footer{
height: 150px;
background-color: #CCCC33;
}
article .middle{
background-color: darksalmon;
float: left;
width: 100%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
article .left{
background-color: #65cca1;
float: left;
width: 150px;
margin-left: -100%;
position: relative;
left: -150px;
}
article .right{
background-color: #f786ff;
float: left;
width: 200px;
margin-left: -200px;
position: relative;
left: 100px;
}
实现双飞翼布局
有了圣杯布局为什么还要有双飞翼布局
圣杯布局是有一定局限性的，在middle居中时，限定了left和right必为position：relative才合适，如果它们不为relative，整个布局就费了。
怎样解决圣杯布局的局限性？
关键是给middle内部添加一层，作为安全层。
修改html。为middle加个内部层，原有基础上添加
<div class="middle">
<div class="inner">
我是中间
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
<p>元素多多看对齐</p>
</div>
</div>
实现过程
前面left和right浮动上来的过程与圣杯一致，不同的是middle自适应，将圣杯布局的middle自适应步骤改为：
.inner{
margin-left: 150px;
margin-right: 150px;
}
外部高度为三者最高的步骤类似圣杯布局，将middle出的设置改为inner的即可
双飞翼布局全部代码
*{
margin: 0;
padding: 0;
}
header{
height: 150px;
background-color: #0099FF;
}
article{
/*height: 300px;*/
background-color: #924652;
overflow: hidden;
}
footer{
height: 150px;
background-color: #CCCC33;
}
article .middle{
background-color: darksalmon;
float: left;
width: 100%;
}
article .left{
background-color: #65cca1;
float: left;
width: 150px;
height: 16px;
margin-left: -100%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
article .right{
background-color: #f786ff;
float: left;
width: 200px;
height: 16px;
margin-left: -200px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.inner{
margin-left: 150px;
margin-right: 150px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
不仅仅是三列
怎样实现两列布局？
float:left便可轻松实现，其中left作为主体部分
怎样实现三列布局？
圣杯布局和双飞翼布局便是三列布局
怎样实现多列布局？
在三列布局的基础上，将最后一列不断扩张成两列布局或者三列布局即可实现
思考：
1.圣杯布局和双飞翼布局一步步实现的思路
2.float的实质
以float：left为例，假设a在b前面，将b浮动到左边，看起来像是把a挤到了它后面，其实它更像是在a中插入了文字，它是堆叠在了a上，给b设一定的透明度，给a加个颜色，会发现b的下面是a。
3.float使用时的一个注意事项
只有宽没有高的float并不能达到占位的目的，它并不能挤压到后面的元素
4.float最多能在垂直方向上浮动多远
元素float之后，占据文档流中能占的位置，能占的位置便是，最接近的前一行非浮动元素的后面
5.使用margin-left超视口进行折行控制时，向左的折动距离越大，当前行一点点向视口外部缩进，当缩进为自己宽度并渐渐增大时，会一下子全部出现在上一行中并渐渐移动。
参考资料
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
CSS 经典布局之双飞翼布局
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。