浮動（float）是CSS中一個重要的定位及布局屬性，float 屬性可以接受以下幾個值：
-
none：元素不浮動，默認值。 -
left：將元素浮動到容器左側。 -
right：將元素浮動到容器右側。 -
inherit：元素繼承其父元素的浮動方向。
注意：浮動的元素會自動添加display: block。
什么是浮動
要理解什么是浮動，可以參考傳統的印刷設計。在傳統印刷布局中，可以設置圖片被文字環繞。如下所示：
在傳統頁面布局軟件（例如MS Word）中，文本框可以設置是否要文字環繞。如果忽略文字環繞，圖片會被認為脫離了文本流，這時文字會穿過圖片，好像圖片并不存在。
在網頁設計中，設置了浮動的元素就好像傳統印刷布局中設置了文字環繞的圖片。和絕對定位元素不同，浮動元素雖然脫離了正常的文檔流，但并沒有脫離文本流，意思是正常文檔流中的塊級元素會按照浮動元素不存在一樣排列，但是文本并不會和浮動元素重疊。
與之相對，絕對定位元素完全脫離了頁面的文檔流和文本流，類似傳統印刷中忽略文字環繞的情況。絕對定位的元素不會影響其他元素的位置也不會受其他元素的影響。下面是一個浮動前后對比的例子：
圖 | 浮動前：
圖 | 浮動后：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動布局
除了實現簡單的文字環繞效果，浮動還能夠用來做整個頁面的布局，如下所示：
除此之外，相對于絕對定位元素，使用浮動元素可以使布局更加靈活，例如下面這個使用浮動布局的名片，當照片尺寸發生變化時，右側的文字會自適應重新布局，不影響整體顯示效果：
然而如果使用絕對定位的照片，雖然初始的顯示效果是相同的，但是當照片尺寸變化時，文字就可能被遮擋，顯然這種布局的靈活性并不好，如下所示：
清除浮動
說到浮動就不能不提它的兄弟屬性clear。clear 屬性指定：一個元素是緊挨著前面的浮動元素，還是必須移動到它們的下面。CSS屬性既可以用于浮動元素，也可以用于非浮動元素。
當應用于非浮動元素時，它將元素的邊框邊界移動到所有相關浮動元素外邊界的下方，這時候外邊距塌陷不起作用。
當應用于浮動元素時，它將元素的外邊界移動到所有相關浮動元素外邊界的下方。這會影響后面浮動元素的布局，后面的浮動元素的位置無法高于它之前的元素。
圖 | 清除浮動前
上面這個例子中， sidebar浮動到了右側，并且其長度小于正文容器。如果footer也設置了浮動，就可能出現如上圖所示的情況。為了避免這種情況出現，需要用到清除浮動，使footer移動到所有浮動元素的下方。
圖 | 清除浮動后
這里為footer設置的是clear: both，clear屬性有四個可能的參數，最常用的就是both，會清除兩個方向的浮動。使用left 和 right可以清除相應方向上的浮動。none 是默認值，inherit表示該元素繼承其父元素的clear屬性的值。
容器的塌陷問題
使用浮動時遇到的一個很棘手的問題是浮動對容器的影響。如果容器內除了浮動元素外沒有其他元素，那么它的高度就會塌陷為0。如果父元素背景透明的話，這種塌陷并不容易被覺察到，如下所示：
如果想避免容器的塌陷，可以將容器浮動（形成塊級格式上下文），或者在浮動元素和容器尾部之間設置清除浮動，后者可以通過偽元素 :after實現：
#container:after {
content: "";
display: block;
clear: both;
}
清除浮動的技巧
在一些復雜的情況下，需要一些特別的方法來清除浮動。
-
使用空的DIV元素
顧名思義，就是在需要清除浮動的位置放置一個空的div。
<div style="clear:both;"></div>
設置overflow
通過為父元素設置overflow為auto或hidden可以使父元素將浮動元素包含在內，避免了浮動元素對之后元素的影響。這個方法的原理也是形成了塊級格式上下文。利用偽類
:after
利用偽類:after可以實現清除浮動的目的，只需要為容器添加一個類，如"clearfix"，然后定義如下css樣式：
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both
}
舉個例子說明，例如以下一組色塊：
圖 | 清除浮動前
如果想實現每一行一種顏色的效果，有兩種策略：
為每種顏色的四個色塊外套一層div，然后為div設置
overflow為auto或hidden，或像上面提到的利用偽類:after。在每種顏色的最后一個色塊后面添加一個空的div，并為其設置
clear: both。
最后的效果如下：
圖 | 清除浮動后
