例

讓圖像向右側浮動：

img

{

float:right;

}

屬性定義及使用說明

float屬性指定一個盒子（元素）是否應該浮動。

注意： 絕對定位的元素忽略float屬性！

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

屬性值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

、有float屬性的元素會跑

代碼：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue; float: left;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

在瀏覽器中的樣式：

從圖中可以看出，div本為塊級標簽，本應各自占一行，但是添加浮動屬性之后，都向左浮動，跑到了一排。

二、如果上一行沒有float元素，那么float元素是跑不上去的

代碼：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

從圖中可以看出，div1沒有floa屬性，所以div2不能浮動上去；而div2有浮動屬性，所以div3會浮動上來。

三、有float屬性的元素是脫離文檔流的，非浮動元素會忽略掉前面的浮動元素

代碼：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;float:left;}

#box2{ background: red;float: left; }

#box3{background: black;width:150px;height:100px; }

在瀏覽器中的樣式：

從圖中可以看出，div1和div2浮動在文檔之上，div3忽略了div1和div2，div1和div2沒有影響div3的位置。