如何在css中設(shè)置浮動(dòng)

本篇文章為大家展示了如何在css中設(shè)置浮動(dòng)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出魯山免費(fèi)做網(wǎng)站回饋大家。

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

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

基本語(yǔ)法格式：

選擇器{float:屬性值;}

left 元素向左浮動(dòng)
right 元素向右浮動(dòng)
none 元素不浮動(dòng)

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

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

浮動(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è)置寬高。我們知道，它們的效果如下：

如何在css中設(shè)置浮動(dòng)

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

如何在css中設(shè)置浮動(dòng)

這就達(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：

如何在css中設(shè)置浮動(dòng)

上圖中，在默認(rèn)情況下，兩個(gè)div標(biāo)簽是上下進(jìn)行排列的?，F(xiàn)在由于float屬性讓上圖中的第一個(gè)

標(biāo)簽出現(xiàn)了浮動(dòng)，于是這個(gè)標(biāo)簽在另外一個(gè)層面上進(jìn)行排列。而第二個(gè)

還在自己的層面上遵從標(biāo)準(zhǔn)流進(jìn)行排列。

證明2：

如何在css中設(shè)置浮動(dòng)

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

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

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

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

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

如何在css中設(shè)置浮動(dòng)

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

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

如何在css中設(shè)置浮動(dòng)

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

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

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

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

如何在css中設(shè)置浮動(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è)東西，為避免混亂，我們?cè)诔跗谝欢ㄒ裱粋€(gè)原則：永遠(yuǎn)不是一個(gè)東西單獨(dú)浮動(dòng)，浮動(dòng)都是一起浮動(dòng)，要浮動(dòng)，大家都浮動(dòng)。