css样式 float的理解
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>