float and position: absolute difference of
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>
The results: float is indeed out of the document flow, half the level of the left div to improve, although the right to squeeze div 200px but text is still there.
position: absolute;
The float: left replace position: absolute effect is as follows:
the above comparison FIG concluded: position: absolute; left div improved one level, but also from the document stream, the right div text left completely extruded
