float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
float有四個屬性分別是：left,right,none,inherit
float:left :表示向左浮動
float：right：表示向右浮動
float：none：表示初始值
float：inherit：規定應該從父元素繼承 float 屬性的值
可以看一下代碼的演示
hmtl
1 <body> 2 <div class="one"> 3 <div class="left"></div> 4 </div> 5 </body>
float：left屬性
代碼
1 .left{ 2 width: 100px;height: 100px;background: plum;float: left; 3 }
演示
float：right屬性
代碼
1 .right{ 2 width: 100px;height: 100px;background: plum;float: right; 3 }
演示
float還可以用來實現橫向兩列布局，三列布局，水平菜單等，這里就不列舉了。
當你想要清除浮動時，可以在父元素上加入以下幾種方法
1.overflow:hidden(不推薦)
優點：代碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素
2.使用after偽元素清除浮動（推薦使用）
1 .clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/ 2 content: ""; 3 display: block; 4 height: 0; 5 clear:both; 6 visibility: hidden; 7 } 8 .clearfix{ 9 *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/ 10 } 11 12 <body> 13 <div class="fahter clearfix"> 14 <div class="big">big</div> 15 <div class="small">small</div> 16 <!--<div class="clear">額外標簽法</div>--> 17 </div> 18 <div class="footer"></div> 19 </body>
優點：符合閉合浮動思想，結構語義化正確
缺點：ie6-7不支持偽元素：after，使用zoom:1觸發hasLayout.