常见的单列布局（一般来说就是典型的上中下）：
- 一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
- 一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。
- 第一种情况
HTML:
<div class="layout">
<div class="header">this is head</div>
<div class="content">this is body</div>
<div class="footer">this is foot</div>
</div>
CSS:
.layout{
background: lightblue;
max-width: 960px;
margin: 0 auto;
}
- 第二种情况
HTML:
<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
CSS:
.layout{
/* width: 960px; */
/*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
background: lightpink;
max-width: 960px;
margin: 0 auto;
}
两列布局:
二列布局的特征分为：侧栏固定宽度，主栏自适应宽度以及侧栏不固定宽度，主栏自适应宽度。
圣杯布局 :margin+float的左列定宽，右列自适应
HTML:
<div class="parent">
<div class="left">can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?</div>
<div class="right-fix">
<div class="right">can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?can you see me?</div>
</div>
</div>
CSS:
.left{
float: left;
width: 100px;
position: relative;
background: lightpink;
}
.right-fix{
float: right;
width: 100%;
background: lightblue;
margin-left: -100px;
}
.right{
margin-left: 120px;
background: lightcyan;
}
通过颜色对比可以看出，实际上 .right-fix 和 .left在同一行并且重合了一部分，为了使右列显示出其内容区，特别设置一个 .right 来显示内容区，并且充当真正的右列
绝对定位：absolute实现左列定宽，右列自适应
HTML:
<div class="parent">
<div class="left">我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边</div>
<div class="right">我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边</div>
</div>
CSS:
body{
width:100%;
margin:0;
padding:0;
}
.parent{
position: relative;
width:100%;
height:700px;
background: lightpink;
}
.left{
position: absolute;
width:120px;
height: 100%;
left:0;
background: lightgrey;
}
.right{
position: absolute;
left:140px;
right: 0;
height: 100%;
background: lightblue;
}
比圣杯布局好理解，但是不能实现不定宽，同样完美的实现了自适应
table布局：利用表格(table)的宽度必然等于其所有单元格(table-cell)加起来的总宽度，那么只要表格的宽度一定，其中一个（或几个）单元格的宽度也一定，那么另外一个未设置宽度的单元格则会默认占满剩下的宽度，即实现自适应。
HTML:
<div class="f">
<div class="l">
<p>我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边</p>
</div>
<div class="r"><p>我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边</p></div>
</div>
CSS:
div.f{
display: table;
width:100%;
height: 700px;
background: lightblue;
}
div.l, div.r{
display: table-cell;
padding: 0 20px;
}
div.l{
width:100px;
background: lightpink;
}
div.r{
background: lightgrey;
}
效果图：
float+BFC:左列不定宽，右列自适应
HTML:
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
CSS:
.left{
float: left;
width: 100px;
background: lightgrey;
margin-right: 20px;
}
.right{
overflow: hidden;
background: lightpink;
}
三列布局的特征是两侧两列固定宽度，中间列自适应宽度。
双飞翼布局：双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。
HTML:
<div class="parent-wrap">
<div class="main"></div>
</div>
<div class="left">我在左边</div>
<div class="right">我在右边</div>
CSS:
.parent-wrap{
width: 100%;
height: 700px;
float: left;
background: lightgrey;
}
.left {
float: left;
width: 190px;
height: 700px;
background: lightpink;
margin-left: -100%;
}
.right {
float: left;
width: 230px;
height: 700px;
background: lightseagreen;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
效果图：
