float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

float：none | left | right | inherit   預設值：none 元素不浮動，並會顯示在其在文字中出現的位置。

常用的值為：left，right。

特點：

1.預設寬度為內容寬度；

2.脫離了文件流；

3.向指定方向一直移動；

4.float的元素在同一文件流；

5.float元素是半脫離文件流。（對元素脫離文件流，對內容仍在文件流）

主要應用場景：多列布局。

清除Float

清除(clear)是浮動(float)的相關屬性.一個設定了清除Float的元素不會如浮動所設定的一樣，向上移動到Float元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。

上例中，側欄向右浮動，並且短於主內容區域。頁尾(footer)於是按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁尾(footer)上清除浮動，以使頁尾(footer)待在浮動元素的下面。

#footer { clear: both; }

清除(clear)也有4個可能值。最常用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚一個方向的浮動。none 是預設值，只在需要移除已指定的清除值時用到。inherit 應該時第五個值，不過很奇怪的是 IE 不支援(這個不奇怪吧，IE 從來都這麼特立獨行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。

clear：left | right | both | none | inherit   預設是：none

常用both    

特點是：1.應用於後續元素； 2.應用於塊級元素。

用法：

.clearfix：after{

content:".";

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;

}