一、爲什麼需要浮動？
塊級元素不能與任何元素標籤在同一行，行級元素雖然可以和行級元素在同一行，但是無法調整元素的寬高！
所以標準的文檔流限制太多，非常生硬，不夠靈活。
爲了讓行內元素有並排的效果，也要能設置寬高，所以就需要浮動。
二、關於浮動的性質。
浮動的元素會脫離標準的文檔流!！這個很重要！
當爲標籤設置了浮動之後，這個標籤就可以有寬和高屬性，即使是未轉換的行內元素也可以設置寬和高。
一個行級標籤，不需要轉成塊級元素，就可以設置寬度和高度！
一旦一個元素標籤浮動了，那麼，浮動的標籤之間就可以並排，而且可以設置寬高，無論是行內標籤還是塊級標籤。
浮動的元素還會互相貼靠。
下面有個例子，直接可以理解下，什麼是浮動，脫標。
<style type="text/css">
.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left:
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
此時，兩個塊級元素並排在了一起。
那麼接下來把代碼改一下：
<style type="text/css">
.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
# 在這裏去掉了box2 的浮動
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
結果變成了這樣，box1直接蓋在了box2的上面，這是因爲box1已經脫離了標準文檔流，box2還是普通文檔流，在box2之前已經沒有普通的文檔流了，所以box2也會貼到最邊上。
