包括上中下一栏式、左右两栏式、左右两栏式之纯浮动实现、左右两栏式之绝对定位实现、左右两栏加页眉页脚、左中右三栏之左右浮动实现、左中右三栏之双飞翼实现（多一个div）、左中右三栏加页眉页脚。
1.上中下一栏式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上中下式布局</title>
<style type="text/css">
body{
margin:0;
}
.wrap{
width:900px;
margin:0 auto; /* 设置居中 */
}
#header{
height:100px;
background-color: #6cf;
}
#main{
height:500px;
background-color: #cff;
}
#footer{
height:100px;
background-color: #9cf;
}
</style>
</head>
<body>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap">#section</section>
<footer id="footer" class="wrap">#footer</footer>
</body>
</html>
结果：
2.左右两栏式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右两栏式</title>
<style type="text/css">
body{
margin:0;
}
.wrap{
width:900px;
margin:0 auto;/* 设置居中 */
}
#left{
width:200px;
height:400px; /* 自己一定要自己设置高度，设置在父级上不生效 */
background-color:#cff;
float:left;/* 浮动是设置该元素的下一个同级元素的浮动方向 */
}
#right{
height:400px;/* right的width会根据left的宽度自适应 ,如果父级wrap的width设置的是%，会根据浏览器的宽自适应*/
margin-left:200px;/* 如果不设置margin-left，默认会占满整个父级div，前200px被left覆盖 */
background-color:#fcc;
}
</style>
</head>
<body>
<!-- 混合浮动＋普通流 -->
<div id="box" class="wrap">
<aside id="left"></aside><!-- <aside> 的内容可用作文章的侧栏。 -->
<section id="right"></section>
</div>
</body>
</html>
结果：
3.左右两栏式2——纯浮动实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右两栏式——纯浮动方式</title>
<style type="text/css">
body{
margin:0;
}
.wrap{
width:900px;
margin:0 auto;/* 设置居中 */
height:400px;/* 因为自己元素都是浮动元素，不会撑开父级宽高，所以父级元素也必须设置宽高 */
}
#left{
width:200px;
height:400px;/* 自己一定要自己设置高度，设置在父级上不生效 */
background-color:#cff;
float:left;/* 浮动是设置该元素的下一个同级元素的浮动方向 */
}
#right{
width:700px;/* right的width会根据left的宽度自适应 ,如果父级wrap的width设置的是%，会根据浏览器的宽自适应*/
height:400px;
float:left;
background-color:#fcc;
}
</style>
</head>
<body>
<!-- 混合浮动＋普通流 -->
<div id="box" class="wrap">
<aside id="left"></aside><!-- <aside> 的内容可用作文章的侧栏。 -->
<section id="right"></section>
</div>
</body>
</html>
结果：
4.左右两栏式3——绝对定位实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右两栏式——绝对定位实现</title>
<style type="text/css">
body{
margin:0;
}
.wrap{
width:900px;
height:400px;
margin:0 auto;/* 设置居中 */
position:relative;
}
#left{
width:200px;
height:400px;/* 自己一定要自己设置高度，设置在父级上不生效 */
background-color:#cff;
position:absolute;
left:0;/* 这里的left是相对父级而言 */
top:0;
}
#right{
width:700px;
height:400px;/* right的width会根据left的宽度自适应 ,如果父级wrap的width设置的是%，会根据浏览器的宽自适应*/
background-color:#fcc;
position:absolute;
left:200px;
top:0;
}
</style>
</head>
<body>
<!-- 混合浮动＋普通流 -->
<div id="box" class="wrap">
<aside id="left"></aside><!-- <aside> 的内容可用作文章的侧栏。 -->
<section id="right"></section>
</div>
</body>
</html>
结果：
5.左右两栏加页眉页脚
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右两栏加页眉页脚</title>
<style type="text/css">
body{
margin:0;
}
#header{
height:100px;
background-color: #6cf;
}
#main{
height:400px;
background-color: #cff;
position:relative;
}
#footer{
height:100px;
background-color: #9cf;
}
.wrap{
width:900px;
margin:0 auto;/* 设置居中 */
}
#left{
width:200px;
height:400px;/* 自己一定要自己设置高度，设置在父级上不生效 */
background-color:#cff;
position:absolute;
left:0;/* 这里的left是相对父级而言 */
top:0;
}
#right{
width:700px;
height:400px;/* right的width会根据left的宽度自适应 ,如果父级wrap的width设置的是%，会根据浏览器的宽自适应*/
background-color:#fcc;
position:absolute;
left:200px;
top:0;
}
</style>
</head>
<body>
<header id="header" class="wrap">header</header>
<section id="main" class="wrap">
<aside id="left"></aside><!-- <aside> 的内容可用作文章的侧栏。 -->
<section id="right"></section>
</section>
<footer id="footer" class="wrap">footer</footer>
</body>
</html>
结果：
6.左中右三栏1——左右浮动，中间自适应
左右width固定，中间的width自适应；左右两边的标签放在中间标签的前面（前面两个元素都是脱离文档流的，放在最后面才能左右两个独占一行）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左中右——浮动实现</title>
<style type="text/css">
body{
margin:0;
}
#box{
width:80%;
height:400px;
margin:0 auto;
}
#left,#right{
width:200px;
height:400px;
background-color: #cff;
}
#left{
float:left;
}
#right{
float:right;
}
#main{
height:400px;
background-color:#9cf;
}
</style>
</head>
<body>
<div id="box">
<aside id="left"></aside>
<section id="main"></section>
<aside id="right"></aside>
</div>
</body>
</html>
结果：
7.左中右三栏之双飞翼
双飞翼布局：主要内容section要放在最前面，且在section里有包含一个div元素
注意点：
中间主要内容的宽度随浏览器变化（设置最外层容器宽度为百分比）；
left和right两个元素需要使用margin-left进行调整位置；
content需要设置margin：0 200px给left和right留出足够的空间；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左中右——双飞翼</title>
<style type="text/css">
body{
margin:0;
}
#wrap{
width:80%;
margin:0 auto;/* 让整个大容器居中 */
}
#main{
width:100%;/* 宽度随浏览器变化 */
background-color:#9cf;
float:left;/* 让其下一个元素即left左浮 */
}
#left{
width:200px;
height:400px;
background-color: #cff;
float:left;
margin-left:-100%;/* margin-left的值是整个main的100%width */
}
#right{
width:200px;
height:400px;
background-color: #cff;
float:left;
margin-left:-200px;/* 只移动自身的width即可 */
}
#content{
height:400px;/* 父级main也有自己content撑起宽度 */
margin:0 200px;/* 如果不设置，则content的宽度就会是100%即main的宽度,这里需要给left和right让出200px */
}
</style>
</head>
<body>
<div id="wrap">
<!-- 双飞翼布局主要内容必须放在最前面 -->
<section id="main">
<div id="content">#content</div>
</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</div>
</body>
</html>
结果：
8.左中右三栏加页眉页脚
中间不管分成几栏都必须有大容器包含；
浮动元素宽度由内容撑开；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左中右三栏式加页眉页脚</title>
<style type="text/css">
body{
margin:0;
}
/* 上中下页面页脚的公共样式 */
.wrap{
width:900px;
margin:0 auto;/* 使其居中显示 */
}
#header{
height:200px;
background-color: #6cf;
}
#main{
height:400px;
/* background-color: #9cf; */
}
#footer{
height:200px;
background-color: #6cf;
}
/* 中间三栏式布局 */
#midDiv{
width:900px;
margin:0 auto;
}
#middle{
width:100%;
background-color: #9cf;
float:left;
}
#left{
width:200px;
height:400px;
background-color: #cff;
float:left;
margin-left:-100%;
}
#right{
width:200px;
height:400px;
background-color: #cff;
float:left;
margin-left:-200px;
}
#content{
height:400px;
margin:0 200px;
}
</style>
</head>
<body>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap">
<div id="midDiv">
<section id="middle">
<div id="content">#content</div>
</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</div>
</section>
<footer id="footer" class="wrap">#footer</footer>
</body>
</html>
结果：
