一、单列布局：
方法一：上中下同宽
html:
<div id="container">
<div id="header">头部</div>
<div id="content">内容</div>
<div id="footer">尾部</div>
</div>
css:
body{margin: 0;}
#container{
height: 100%;
/* width: 960px; */
/*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
max-width: 960px;
margin: 0 auto;
}
#header{
height: 20%;
background-color: red;
}
#footer{
height: 20%;
background-color: yellow;
}
#content{
height: 60%;
background-color: green;
}
效果：
方法二：上下为浏览器宽度，中间没有
html:
<div id="container">
<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
</div>
css:
#container{
height: 100%;
}
#header{
background-color: yellow;
height: 20%;
}
#content{
background-color: green;
height: 60%;
}
#footer{
background-color: red;
height: 20%;
}
.layout{
/*width: 960px;*/
max-width: 960px;
margin: 0 auto;
}
效果：（当然，当浏览器宽度小于960px时，与上一个方法显示效果相同）
二、三列布局
1.两边定宽中间自适应
方法一：float+margin
html:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"></div>
</div>
css:
div{height: 100%;}
#left{
width: 100px;
float: left;
background-color: red;
}
#right{
width: 100px;
float: right;
background-color: yellow;
}
#content{
margin: 0 100px;/* 或者换成overflow: hidden; 触发了BFC使重新计算宽度，就不需要写margin了*/
background-color: green;
}
效果：（缺点：先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列，渲染时先渲染了侧边栏，而不是比较重要的主面板.。）
DOM顺序固定！
方法二：（绝对定位法）
html:
<div id="container">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
css:
div{height: 100%;}
#left,#right{
position: absolute;
top: 0;
width: 100px;
}
#left{
left: 0;
background-color: red;
}
#right{
right: 0;
background-color: yellow;
}
#content{
margin: 0 100px;/* overflow: hidden; */
background-color: green;
}
DOM顺序可以随意调整！
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
方法三：margin负值法（圣杯布局）
html:
<div id="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css:
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.right {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
#container {
padding: 0 230px 0 190px;
}
DOM元素的书写顺序不得更改。
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。
方法四：margin负值法（双飞翼法）
html:
<div class="main-wrap">
<div class="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
css:
.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
