已知position 設(shè)置relative 屬性可以保留偏移前的位置（偏移前的位置不脫離文檔流），那如果給元素同時(shí)設(shè)置float：left 或者right 會(huì)怎么樣呢？
\<!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>
<!-- 同個(gè)元素同時(shí)設(shè)置float屬性(left或者right) 和position：relative -->
<!-- 元素將同時(shí)浮動(dòng)起來(lái)，脫離文檔流，也就說(shuō)修改了 relative可以保留偏移前位置的屬性，如果其他元素有文字，那文字將圍繞在偏移前位置的周?chē)?-->
<!-- 和單數(shù)設(shè)置 absolute 也是浮動(dòng)脫離文檔流不同的地方是，設(shè)置絕對(duì)定位的元素其他元素的文字不會(huì)圍繞在他周?chē)?，?huì)直接無(wú)視他的存在 -->
<div class="father">
<div class="son">我是一個(gè)盒子</div>
<p>我是p標(biāo)簽，你們能看見(jiàn)我不？ </p>
<h1>我是一段文字，你們能看見(jiàn)我不？</h1>
</div>
</body>
</html>
pic.jpg
同個(gè)元素同時(shí)設(shè)置float屬性(left或者right) 和position：relative 。
- 元素將同時(shí)浮動(dòng)起來(lái)，脫離文檔流，也就說(shuō)修改了 relative可以保留偏移前位置的屬性，如果其他元素有文字，那文字將圍繞在偏移前位置的周?chē)?/li>
- 和單數(shù)設(shè)置 absolute 也是浮動(dòng)脫離文檔流不同的地方是，設(shè)置絕對(duì)定位的元素其他元素的文字不會(huì)圍繞在他周?chē)瑫?huì)直接無(wú)視他的存在。
還有沒(méi)有其他情況還有待研究，歡迎交流。
