float和position都可以利用浮動對元素進行定位，但是有一點微小的區別
Position使元素完全脫離文檔流
float使元素半脫離文檔流
什麼意思？
看下面的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>floatTest</title>
<style type="text/css">
.class1{
height: 100px;
border: 1px solid black;
position: absolute;
}
.class2{
height: 100px;
border: 1px solid red;
width: 100px;
}
</style>
</head>
<body>
<div class="class1">
我是class1
</div>
<p class="class2">
這是float的測試局
</p>
</body>
</html>
效果圖：
可以看到，class2中的文字都已經佔據class1的位置
使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>floatTest</title>
<style type="text/css">
.class1{
height: 100px;
border: 1px solid black;
float: left;
}
.class2{
height: 100px;
border: 1px solid red;
width: 100px;
}
</style>
</head>
<body>
<div class="class1">
我是class1
</div>
<p class="class2">
這是float的測試局
</p>
</body>
</html>
效果圖
class2中的文字爲class1的文字讓出了位置。可見，雖然float也脫離了文檔流，但是文本依然會爲這個元素讓出位置，環繞在周圍。最經典的就是float完成圖片文字環繞效果。