浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊表現得就像浮動框不存在一樣。
float效果展示
基本設定
在網頁中正常新增3個div色塊:
html**:
xml/html code複製內容到剪貼簿
簡單設定一些大小和顏色：
css**:
css code複製內容到剪貼簿
效果如下：
正常情況下，3個div從上至下依次排序
下面，我們來使用下float屬性，並設定值right
給div1標籤新增float屬性
css code複製內容到剪貼簿
程式設計客棧
效果如下：
我們會發現，div1跑到了螢幕的右側，這就是讓它浮動到右側的表現。
同時給3個div都設定float: left
css code複製內容到剪貼簿
效果如下：
當我們把3個div都設定了向左浮動之後，就可以實現這種橫排布局
修改css**（div1的高度和div2的寬度），如下：
css code複製內容到剪貼簿
效果展示：
我們會發現，當div2足夠寬，一行內放不下div3的時候，div3會自動從第二行開始布局。但是又由於div1的高度多了一些，所以div3會從div1的後面排布，而不會從頭開始
使用 overflow 清除浮動
樣例：css code複製內容到剪貼簿
或者css code複製內容到剪貼簿
overflow 樣式值為 非 visilbe 時，實際上是建立了 css 2.1 規範定義的 block formatting contexts。建立了它的元素，會重新計算其內部元素位置，從而獲得確切高度。這樣父容器也就包含了浮動元素高度。這個名詞過於晦澀，在 css 3 草案中被變更為名詞 root flow，顧名思義，是建立了乙個新的根布局流，這個布局流是獨立的，不影響其外部元素的。實際上，這個特性與 早期 ie 的 haslayouwww.cppcns.comt 特性十分相似。
注意相容問題：
block formatting contexts 概念是在 css 2.1 規範內被提出。因此 ie6/7 中並不被支援，這是由於之前的 ie 版本僅完全實現了 css 1 規範標準，以及一部分 css 2.0 規範。在 ie 7 中，overflow 值為非 visible 時，可以觸發 haslayout 特性。這同樣使得 ie 7 同樣可以使容器包含浮動元素。
本文標題: css使用float屬性設定浮動元素的例項教程
本文位址:
CSS浮動屬性Float詳解
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
CSS浮動屬性Float詳解
原文 float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面...
CSS浮動屬性Float詳解
什麼是css float？float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的...