float和position:absolute的区别
float:left
<!1DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
<style>
.wrap{
width:500px;
height:500px;
border:1px solid #000
}
.left{
width:200px;
height:200px;
background:blue;
float:left;
<!-- position:absolute; -->
<!-- float也就是说前面浮动元素会位于后续的非浮动元素的上方，确实是脱离了文档流。这大概就是“浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。”的意思吧。 -->
}
.right{
width:400px;
height:200px;
background:pink;
}
</style>
<body>
<div class="wrap">
<div class="left">左边</div>
<div class="right">右边22222222222222222222</div>
</body>
</html>
结果：float确实是脱离了文档流，左边的div提高半个层级，虽然右边的div挤进去了200px但是文字还在。
position:absolute;
把float:left替换成position:absolute效果如下：
对比上面的图得出结论：position:absolute;左边div提升了一个 层级，也是脱离了文档流，右边div的文字完全被挤入左边