<!DOCTYPE html>
<html>
<head>
<style>
/*
1.不加doctype 低版本解析不同
2.id 的属性不能为数字
3.文件编码和设置字体相符
*/
div{
height:200px;
background:blue;
}/*每个div独占一行*/
#main{
width:20px;
height:200px;
background:lawngreen;/*背景颜色*/
float:left;/* 向左浮动*/
}
#end{
width:20px;
height:200px;
background:red;
float:right;/*浮动以后，下面的块会上向上移动*/
}
#end2{
height:400px;
background:orange;
/* clear:right; 清除右幅*/
clear:both;
}
</style>
</head>
<body>
<div id="header"> </div>
<div id="main"></div>
<div id="end"></div>
<div id="end2"></div>
</body>
</html>
原文：http://www.cnblogs.com/jiangger/p/6439699.html