float
w3cSchool里解释说，
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
他不占据文档流空间，因此我试验：
1、如果两个div，第一个正常，第二个设为浮动，是不是第二个就会覆盖掉第一个，但实际试验情况不是如此，第二个div还是在第一个div的下边显示；
2、连个div，
第一个设为浮动，第二个正常，显示结果为第一个浮动div覆盖第二个div。
因此我判断：例1->
第二个div设为浮动后，确实不占据文档空间，但是引文第一个是普通文档，他占据了文档流空间，浮动元素认为上边的文档流都已占用，因此第二个浮动div要从下边显示。
例2->
第一个div设为浮动后，不占据文档空间，所以第二个普通文档会上移到第一个div的下面，因为他不认为上边有元素，所以会自动上移。
例子：
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<style>
body { margin:0;}
#side { float: left;}
#main {
background: #99FFFF; height: 300px; }
#main1 { background: red; height:
500px;
}
文章出处：标准之路(http://www.aa25.cn)
</style>
</head>
<body>
<div
id="main">你好啊</div>
<div id="side"><img
src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif"
width="192" height="142" /></div>
<div
id="main1">你好啊</div>
</body>
</html>
原文：http://www.cnblogs.com/13188196we/p/3574442.html