在了解float之前，我們需要了解一個概念-標准文檔流
文檔流是文檔中可顯示對象在排列時所占用的位置。而標准文檔流指的是在不使用其他的與排列和定位相關的特殊CSS規則時，各種元素的排列規則。標准流里面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要並排、並且就要設置寬高，就要使文檔脫離標准流。
CSS中有兩種方法，使一個元素脫離標准文檔流：
（1）浮動
（2）定位
一、這里來了解第一種方法——浮動
Float是CSS布局中使用非常多的一個屬性。
float取值：
left 沿着父容器靠左排列。
right 沿着父容器靠右排列。
none 沒有浮動
現在有兩個div，分別設置寬高。它們的效果如下：
此時，給這兩個div增加一個浮動屬性float: left;，效果如下：
這就是浮動的效果。此時，兩個元素在容器左側並排，使用float之后，可以設置寬度高度了。
但是很重要的一個點就是：float浮動用於布局，可以達到靠左靠右的效果，但是，當使用完float浮動之后，一定要清除浮動，要不然很可能會造成父容器的高度坍塌。
二、float特性詳解：
性質1：浮動的元素脫離文檔流
未添加float之前兩個div上下排列，float屬性讓上圖中的第一個<div>標簽出現了浮動，於是這個標簽在另外一個層面上進行排列。
性質2：浮動的元素互相貼靠
加浮動的元素，會脫離文檔流，會沿着父容器靠左或靠右排列，如果之前已經有浮動的元素，會挨着浮動的元素進行排列。
上圖顯示 ，box3如果有足夠空間，那么就會靠着box2號。如果沒有足夠的空間，那么會靠着box1。如果沒有足夠的空間，box3自己去貼容器左側。box3貼左牆的時候，並不會往box1里面擠。
性質3：一個浮動的元素，如果沒有設置width，那么將自動收縮為內容的寬度
div本身是塊級元素，如果不設置widh，它會單獨占整行；但是，設置float浮動后，width就有div的內容決定。
float注意點 ：只會影響后面的元素；內容默認提升半層；默認寬根據內容決定；換行排列，當容器放不下這些浮動元素的時候，就會換行排列；主要給塊元素添加，但也可以給內聯元素添加。
By:逆戰班伍延彬