定位主要是用来设定元素在页面上的位置的，其代码为：position
定位有三种定位方式：
其中在一般的页面中，最常用的就是relative+absolute，在父元素设置relative绝对定位，在子元素设置absolute相对定位，即子绝父相。
设置了position：relative；定位属性之后，通过left、right、top、bottom来设置相对四个方向的位移，即可达到定位的需求
语法格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
.x1{
position: relative;
background-color: chartreuse;
left: 100px;
}
.x2{
background-color: red;
position: absolute;
left: 200px;
}
</style>
</head>
<body>
<div class="x1">
我是x1
<div class="x2">我就是x2</div>
</div>
</body>
</html>
效果图：
可以设置的单位有px、%
浮动主要是针对块级元素说的，对块级元素设置float属性后，该元素处于不完全脱离文档流状态。
不完全脱离文档流：使元素漂浮起来，但还保留着自身的位置，其他元素能往上拼接，但是不能占有。
简单的说，就是让别的元素环绕在自己身边。
在float中有两种设置，left、right，分别是左浮动和右浮动
浮动这种特殊的不完全脱离文档流将会极大地破坏原有的文档流位置，所以为了去除这种影响，我们可以在下面的元素设置清除浮动：clean：both；
语法格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.x1{
width: 1200px;
height: 200px;
position: relative;
background-color: chartreuse;
left: 100px;
}
.x2{
width: 600px;
height: 200px;
background-color: red;
float: left;
}
.x3{
width: 200px;
height: 200px;
clear: both;
background-color: rgb(53, 104, 172);
}
</style>
</head>
<body>
<div class="x1">
我是x1
<div class="x2">我就是x2</div>
<div class="x3">我就是x3</div>
</div>
</body>
</html>
效果图：
由于x2这个元素设置了float:left;所以x2浮动起来，跑到x1的最左边，x3也因为x2的浮动而把起点上浮，但是因为x1的不完全脱离文档流会保留自身位置，所以x3不能占有x1的内容区，因而有一点点在下面显示。
当我打开x3的清除浮动clear: both;，x3就会恢复正常，在下面显示
