我們來看float的具體使用方法
float屬性描述如下
float: 值;值的部分有以下幾個
none：不指定元素的位置。（初始值）
left：把元素移到左邊。
right：把元素移到右邊。
另外，如果值是inherit的話，會繼承父元素float的值
如果在同壹元素中設置了position屬性的初始值（static）以外的值的話，就不能使用float屬性。
如果要將float屬性應用於塊元素的話，必須先設置width屬性的寬度。
如果想清除floate屬性的話，在clear屬性中輸入相同值（比如float輸入left就輸入left、float輸入right就輸入right）。另外，clear輸入both的值的話，兩邊都可以清除。
下面我們來看float屬性應用的具體示例
首先我們來看float:left;
在寬度為170px，高度為100px的盒子中設置圖像和文字，在圖像上設置float屬性為left時的例子。
代碼如下：
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="content1"><img src="img/mouse.png" alt="圖像" style="width: 45px;height: 45px">
在圖像上使用float:left的例子：文字在右側顯示，剩下部分的文字在圖像的下面被顯示</p>
</body>
</html>CSS代碼
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: left;}在瀏覽器上顯示如下效果
圖像在左側顯示，文字環繞在圖像右側和下側。
然後我們再來看float:right；
代碼如下
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="content1"><img src="img/mouse.png" alt="圖像" style="width: 45px;height: 45px">
在圖像上使用float:right的例子：文字在左側顯示，剩下部分的文字在圖像的下面被顯示</p>
</body>
</html>CSS代碼
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: right;}在瀏覽器上顯示如下效果
圖像在右側顯示，文字圍繞在圖像左側和下側。