请问高手，CSS2的DIV定位，什么时候应该用position，什么时候应该用float？有什么区别？

xuyang0109 2006-02-09 10:07:59

两个属性都是定位的，两个属性的用法大概了解了，可我不知道实际使用的时候应该怎样区分，到底应该用哪一个。
定义一个DIV，一定要用position或float定义它的位置吧？可我看到很多DIV都省略了定位属性，省略之后的DIV依据什么来定位呢？

其实我更喜欢用position，感觉可以精确定位，用float的话，担心会飘浮到不该去的地方，而且IE的BUG，总是容易发生像素的偏差。

下面的代码我都想用position来实现，可是测试两天了，总是不尽人意。

那位高手能帮我把这个版面用position修改一下？谢谢！

<!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" />
<title>无标题文档</title>
<style type="text/css">

body {
margin: 0px;
padding: 0px;
FONT-FAMILY: verdana, arial, helvetica, sans-serif,宋体;
background-color: #333333;
text-align: center;
height: auto;
}

#header {
position: relative;
top: 0px;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 760px;
height:60px;
background-color: #EEE;
text-align: left;
}

#mainbox {
position: relative;
top: 10px;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 760px;
height: auto;
background-color: #daee00;
text-align: left;
}

#leftbox {
float: left;
margin-top:10px;
margin-left:10px;
padding:0px;
height: 250px;
width: 150px;
background-color: #0000ff;
}

#content {
float: right;
margin-top:10px;
margin-right:10px;
margin-bottom: 10px;
padding:0px;
width:570px;
background-color: #ff0000;
}

#content_left {
float: left;
margin-top: 5px;
margin-left: 0px;
margin-bottom: 5px;
height: 420px;
width: 280px;
background-color: #ff00ff;
}

#content_right {
float: right;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
height: 420px;
width: 280px;
background-color: #00ff00;
}

#foot {
position: relative;
top: 10px;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 760px;
height:20px;
background-color: #0033FF;
text-align: left;
}
</style>
</head>

<body>

<div id="header">header</div>
<div id="mainbox">
<div id="leftbox">leftbox</div>
<div id="content">
<div id="content_left">content_left</div>
<div id="content_right">content_right</div>
</div>
</div>
<div id="foot">foot</div>

</body>
</html>

...全文