這篇文章主要介紹了CSS中如何使用float屬性，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
使用CSS中的float屬性可以將應(yīng)用的元素從原本的位置移動(dòng)到左上或向右移動(dòng)。不適用于float的內(nèi)部元素，如文本等會(huì)被設(shè)置在float元素的周圍。
我們來(lái)看float的具體使用方法
float屬性描述如下
float: 值;
值的部分有以下幾個(gè)
none：不指定元素的位置。（初始值）
left：把元素移到左邊。
right：把元素移到右邊。
另外，如果值是inherit的話，會(huì)繼承父元素float的值
如果在同一元素中設(shè)置了position屬性的初始值（static）以外的值的話，就不能使用float屬性。
如果要將float屬性應(yīng)用于塊元素的話，必須先設(shè)置width屬性的寬度。
如果想清除floate屬性的話，在clear屬性中輸入相同值（比如float輸入left就輸入left、float輸入right就輸入right）。另外，clear輸入both的值的話，兩邊都可以清除。
下面我們來(lái)看float屬性應(yīng)用的具體示例
首先我們來(lái)看float:left;
在寬度為170px，高度為100px的盒子中設(shè)置圖像和文字，在圖像上設(shè)置float屬性為left時(shí)的例子。
代碼如下：
HTML代碼
在圖像上使用float:left的例子：文字在右側(cè)顯示，剩下部分的文字在圖像的下面被顯示
CSS代碼
重慶分公司
重慶分公司
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: left;}在瀏覽器上顯示如下效果
圖像在左側(cè)顯示，文字環(huán)繞在圖像右側(cè)和下側(cè)。
然后我們?cè)賮?lái)看float:right；
代碼如下
HTML代碼
CSS代碼
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: right;}在瀏覽器上顯示如下效果
圖像在右側(cè)顯示，文字圍繞在圖像左側(cè)和下側(cè)。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享CSS中如何使用float屬性內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
