在css中，可以使用float屬性來設(shè)置浮動(dòng)，語法“選擇器{float:left|right|none}”；元素會(huì)根據(jù)float屬性的值向左或向右移動(dòng)，直到它的外邊界碰到父元素的內(nèi)邊界或另一個(gè)浮動(dòng)元素的外邊界為止，其周圍的元素也會(huì)重新排列。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，可以使用float屬性來設(shè)置浮動(dòng)。

float屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級框，而不論它本身是何種元素。

基本語法格式：

選擇器{float:屬性值;}

• left 元素向左浮動(dòng)

• right 元素向右浮動(dòng)

• none 元素不浮動(dòng)

css浮動(dòng)是一種使元素脫離普通標(biāo)準(zhǔn)流控制的方法，會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。

浮動(dòng)是一種非常有用的布局方式，它能夠改變頁面中對象的前后流動(dòng)順序。這樣做的好處是，使得內(nèi)容的排版變的簡單，具有良好的伸縮性。

浮動(dòng)是css布局非常強(qiáng)大的布局功能，也是理解CSS布局的關(guān)鍵問題所在，在CSS中，包括div在內(nèi)的任何元素都可以浮動(dòng)的方式顯示。

浮動(dòng)可以讓設(shè)置了浮動(dòng)屬性的元素脫離標(biāo)準(zhǔn)普通流的控制，移動(dòng)到其父元素中指定位置。

浮動(dòng)的性質(zhì)

浮動(dòng)是css里面布局用的最多的屬性。

現(xiàn)在有兩個(gè)div，分別設(shè)置寬高。我們知道，它們的效果如下：

此時(shí)，如果給這兩個(gè)div增加一個(gè)浮動(dòng)屬性，比如float: left;，效果如下：

這就達(dá)到了浮動(dòng)的效果。此時(shí)，兩個(gè)元素并排了，并且兩個(gè)元素都能夠設(shè)置寬度、高度了（這在上一段的標(biāo)準(zhǔn)流中，不能實(shí)現(xiàn)）。

浮動(dòng)想學(xué)好，一定要知道三個(gè)性質(zhì)。接下來講一講。

性質(zhì)1：浮動(dòng)的元素脫標(biāo)

脫標(biāo)即脫離標(biāo)準(zhǔn)流。我們來看幾個(gè)例子。

證明1：

上圖中，在默認(rèn)情況下，兩個(gè)div標(biāo)簽是上下進(jìn)行排列的?，F(xiàn)在由于float屬性讓上圖中的第一個(gè)<div>標(biāo)簽出現(xiàn)了浮動(dòng)，于是這個(gè)標(biāo)簽在另外一個(gè)層面上進(jìn)行排列。而第二個(gè)<div>還在自己的層面上遵從標(biāo)準(zhǔn)流進(jìn)行排列。

證明2：

上圖中，span標(biāo)簽在標(biāo)準(zhǔn)流中，是不能設(shè)置寬高的（因?yàn)槭切袃?nèi)元素）。但是，一旦設(shè)置為浮動(dòng)之后，即使不轉(zhuǎn)成塊級元素，也能夠設(shè)置寬高了。

所以能夠證明一件事：一旦一個(gè)元素浮動(dòng)了，那么，將能夠并排了，并且能夠設(shè)置寬高了。無論它原來是個(gè)div還是個(gè)span。所有標(biāo)簽，浮動(dòng)之后，已經(jīng)不區(qū)分行內(nèi)、塊級了。

性質(zhì)2：浮動(dòng)的元素互相貼靠

我們來看一個(gè)例子就明白了。

我們給三個(gè)div均設(shè)置了float: left;屬性之后，然后設(shè)置寬高。當(dāng)改變?yōu)g覽器窗口大小時(shí)，可以看到div的貼靠效果：

上圖顯示，3號如果有足夠空間，那么就會(huì)靠著2號。如果沒有足夠的空間，那么會(huì)靠著1號大哥。
如果沒有足夠的空間靠著1號大哥，3號自己去貼左墻。

不過3號自己去貼墻的時(shí)候，注意：

上圖顯示，3號貼左墻的時(shí)候，并不會(huì)往1號里面擠。

同樣，float還有一個(gè)屬性值是right，這個(gè)和屬性值left是對稱的。

性質(zhì)3：浮動(dòng)的元素有“字圍”效果

來看一張圖就明白了。我們讓div浮動(dòng)，p不浮動(dòng)。

上圖中，我們發(fā)現(xiàn)：div擋住了p，但不會(huì)擋住p中的文字，形成“字圍”效果。

總結(jié)：標(biāo)準(zhǔn)流中的文字不會(huì)被浮動(dòng)的盒子遮擋住。（文字就像水一樣）

關(guān)于浮動(dòng)我們要強(qiáng)調(diào)一點(diǎn)，浮動(dòng)這個(gè)東西，為避免混亂，我們在初期一定要遵循一個(gè)原則：永遠(yuǎn)不是一個(gè)東西單獨(dú)浮動(dòng)，浮動(dòng)都是一起浮動(dòng)，要浮動(dòng)，大家都浮動(dòng)。

性質(zhì)4：收縮

收縮：一個(gè)浮動(dòng)的元素，如果沒有設(shè)置width，那么將自動(dòng)收縮為內(nèi)容的寬度（這點(diǎn)非常像行內(nèi)元素）。

舉例如下：

上圖中，div本身是塊級元素，如果不設(shè)置width，它會(huì)單獨(dú)霸占整行；但是，設(shè)置div浮動(dòng)后，它會(huì)收縮

浮動(dòng)的補(bǔ)充（做網(wǎng)站時(shí)注意）

上圖所示，將para1和para2設(shè)置為浮動(dòng)，它們是div的兒子。此時(shí)para1+para2的寬度小于div的寬度。效果如上圖所示。可如果設(shè)置para1+para2的寬度大于div的寬度，我們會(huì)發(fā)現(xiàn)，para2掉下來了：

（學(xué)習(xí)視頻分享：css視頻教程）