已知position 设置relative 属性可以保留偏移前的位置（偏移前的位置不脱离文档流），那如果给元素同时设置float：left 或者right 会怎么样呢？
\<!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>
.father {
width: 500px;
height: 500px;
background-color: blue;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
position: relative;
float: left;
/* float: right; */
/* left: -15px; */
/* top: -10px; */
}
P {
width: 300px;
height: 250px;
background-color: chartreuse;
}
</style>
</head>
<body>
<!-- 同个元素同时设置float属性(left或者right) 和position：relative -->
<!-- 元素将同时浮动起来，脱离文档流，也就说修改了 relative可以保留偏移前位置的属性，如果其他元素有文字，那文字将围绕在偏移前位置的周围 -->
<!-- 和单数设置 absolute 也是浮动脱离文档流不同的地方是，设置绝对定位的元素其他元素的文字不会围绕在他周围，会直接无视他的存在 -->
<div class="father">
<div class="son">我是一个盒子</div>
<p>我是p标签，你们能看见我不？ </p>
<h1>我是一段文字，你们能看见我不？</h1>
</div>
</body>
</html>
pic.jpg
同个元素同时设置float属性(left或者right) 和position：relative 。
- 元素将同时浮动起来，脱离文档流，也就说修改了 relative可以保留偏移前位置的属性，如果其他元素有文字，那文字将围绕在偏移前位置的周围。
- 和单数设置 absolute 也是浮动脱离文档流不同的地方是，设置绝对定位的元素其他元素的文字不会围绕在他周围，会直接无视他的存在。
还有没有其他情况还有待研究，欢迎交流。
