<1>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#header {
height:100px;
width:600px;
background:blue;
margin:0px auto; /*上下外边距是0px,左右外边距是自动 即：左右居中*/
}
#main {
/*height:500px;*/
width:600px;
margin:0px auto;
}
#left {
height:300px;
width:150px;
float:left;
background-color:gold
}
#center {
height: 300px;
width: 300px;
float: left;
background: dimgrey;
}
#right {
height: 300px;
width: 150px;
float: left;
background-color: yellow;
}
#bottom {
/*现在我就来说说这个clear 因为#main 这个div是一个大盒子，里面包裹这两个小盒子，这个大盒子没有设置高度，即它的高度为0px，而当大盒子里面的两个小盒子浮动起来了，那么这个#tottom这个下边的盒子就会占据到#header的下面 效果图请看 图1*/
/*clear:both;*/ /*因为上面的三个盒子都浮动了。我这个盒子不想浮动，所有这里我要清除浮动*/
height: 100px;
width: 800px;
margin: 0px auto;
background-color: gray;
}
</style>
</head>
<body >
<div id="header">头（#header）</div>
<div id="main">
<div id="left">左（#left）</div>
<div id="center">中（#center）</div>
<div id="right">右（#right）</div>
</div>
<div id="bottom">下（#bottom）</div>
</body>
</html>
图1
<2>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#header {
height:100px;
width:600px;
background:blue;
margin:0px auto; /*上下外边距是0px,左右外边距是自动 即：左右居中*/
}
#main {
/*height:500px;*/
width:600px;
margin:0px auto;
}
#left {
height:300px;
width:150px;
float:left;
background-color:gold
}
#center {
height: 300px;
width: 300px;
float: left;
background: dimgrey;
}
#right {
height: 300px;
width: 150px;
float: left;
background-color: yellow;
}
#bottom {
/*现在我就来说说这个clear 因为#main 这个div是一个大盒子，里面包裹这两个小盒子，这个大盒子没有设置高度，即它的高度为0px，而当大盒子里面的两个小盒子浮动起来了，那么这个#tottom这个下边的盒子就会占据到#header的下面 效果请看 图1 */
clear:both; /*因为上面的三个盒子都浮动了。我这个盒子不想浮动，所有这里我要清除浮动 加了这么一句，效果请看 图2 */
height: 100px;
width: 800px;
margin: 0px auto;
background-color: gray;
}
</style>
</head>
<body >
<div id="header">头（#header）</div>
<div id="main">
<div id="left">左（#left）</div>
<div id="center">中（#center）</div>
<div id="right">右（#right）</div>
</div>
<div id="bottom">下（#bottom）</div>
</body>
</html>
图2
float 浮动 clear:both清除浮动 ，绝对定位，相对定位
原文：http://blog.csdn.net/fanbin168/article/details/44985331
