1.float定位带来的问题
<html>
<head>
<title>div浮动引发的问题</title>
</head>
<style>
body{
margin:0px
1px 2px
3px;
}
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px
dashed
green;
}
#son1{
float:left;
}
#son2{
float:left;
}
#son3{
float:left;
}
#clear{
clear:both;
}
</style>
<body>
<div
id="father">
<div
id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div
id="son2">bbbbbbbbbbbbbbbbbbbb</div>
<div
id="son3">cccccccccccccccccccc</div>
<div
id="clear"></div><!--采用float技术时，不需要浮动的时候一定要清楚浮动，否则后面的也都跟着浮动了-->
<div
id="son4">dddddddddddddddddddd</div>
<!--son4没有浮动，但它会受上面浮动的影响，也跟着浮动了-->
</div>
</body>
</html>
2.相对定位：是相对于原来的位置，相对定位时div并没有脱离文档流，即原来的位置还空着。
<html>
<head>
<title>采用div定位技术对div进行排版（相对定位）</title>
</head>
<style>
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px
dashed
green;
}
#son1{
position:relative;
left:60%;
}
#son2{
}
</style>
<body>
<div>
<div
id="father">
<div
id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div
id="son2">bbbbbbbbbbbbbbbbbbbb</div>
</div>
</div>
</body>
</html>
3.绝对定位1，如果div的父，父的父，。。。等没有指定position:relative，默认是相对浏览器边框定位，如果有
其中某个父，父的父，等指定了position:relative，则绝对定位是指相对于该父标签绝对定位。
绝对定位会脱离文档流，也即是不再占用原来的位置，别的div可以占用该位置。
绝对定位一般用来做照片签名
<html>
<head>
<title>div定位（绝对定位）</title>
</head>
<style>
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px
dashed green;
}
#son1{
position:absolute;
/*相对于浏览器边框定位*/
right:0px;
}
#son2{
}
</style>
<body>
<div>
<div
id="father">
<div
id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div
id="son2">bbbbbbbbbbbbbbbbbbbb</div>
<div
id="son3">cccccccccccccccccccc</div>
</div>
</div>
</body>
</html>
绝对定位2
<html>
<head>
<title>div定位（绝对定位）</title>
</head>
<style>
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px
dashed
green;
position:relative;
}
#son1{
position:absolute;
/*相对于father定位*/
right:0px;
}
#son2{
}
</style>
<body>
<div>
<div
id="father">
<div
id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div
id="son2">bbbbbbbbbbbbbbbbbbbb</div>
<div
id="son3">cccccccccccccccccccc</div>
</div>
</div>
</body>
</html>