（1）float的简单用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
}
.div2{
width: 250px;
height: 100px;
background-color: red;
float: left;
}
/*如果加了float，则div3会被div2覆盖，因为div2设置了向左漂浮，会接着找上一个div1的尾部进行漂浮，叫重叠样式表*/
.div3{
width: 300px;
height: 150px;
background-color: violet;
}
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>
结果如图
如若div2和div3都设置了向左浮动，结果如图
如果div3加了clear：left，则不会放在div右边了，会在下面，也就是当div2不是浮动对象了
（2）position属性
1、fixed表示固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
position: fixed;
}
/*static一般情况都是默认按这种情况，所以加不加都没影响这里*/
/*fixed表示固定位置，也是脱离了文档流，覆盖别的标签*/
.div2{
width: 250px;
height: 100px;
background-color: red; } .div3{
width: 300px;
height: 150px;
background-color: violet; }
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>
效果如图
2、relative表示根据自己之前的位置进行调整
如图