CSS中如何使用float屬性-創(chuàng)新互聯(lián)

這篇文章主要介紹了CSS中如何使用float屬性，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)成立與2013年，先為常寧等服務(wù)建站，常寧等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為常寧企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

使用CSS中的float屬性可以將應(yīng)用的元素從原本的位置移動(dòng)到左上或向右移動(dòng)。不適用于float的內(nèi)部元素，如文本等會(huì)被設(shè)置在float元素的周?chē)?/p>

CSS中如何使用float屬性

我們來(lái)看float的具體使用方法

float屬性描述如下

float: 值;

值的部分有以下幾個(gè)

none：不指定元素的位置。（初始值）

left：把元素移到左邊。

right：把元素移到右邊。

另外，如果值是inherit的話(huà)，會(huì)繼承父元素float的值

如果在同一元素中設(shè)置了position屬性的初始值（static）以外的值的話(huà)，就不能使用float屬性。

如果要將float屬性應(yīng)用于塊元素的話(huà)，必須先設(shè)置width屬性的寬度。

如果想清除floate屬性的話(huà)，在clear屬性中輸入相同值（比如float輸入left就輸入left、float輸入right就輸入right）。另外，clear輸入both的值的話(huà)，兩邊都可以清除。

下面我們來(lái)看float屬性應(yīng)用的具體示例

首先我們來(lái)看float:left;

在寬度為170px，高度為100px的盒子中設(shè)置圖像和文字，在圖像上設(shè)置float屬性為left時(shí)的例子。

代碼如下：

HTML代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="content1"><img src="img/mouse.png" alt="圖像" style="width: 45px;height: 45px">
在圖像上使用float:left的例子：文字在右側(cè)顯示，剩下部分的文字在圖像的下面被顯示</p>
</body>
</html>

CSS代碼

p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: left;}

在瀏覽器上顯示如下效果

圖像在左側(cè)顯示，文字環(huán)繞在圖像右側(cè)和下側(cè)。

CSS中如何使用float屬性

然后我們?cè)賮?lái)看float:right；

代碼如下

HTML代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="content1"><img src="img/mouse.png" alt="圖像" style="width: 45px;height: 45px">
在圖像上使用float:right的例子：文字在左側(cè)顯示，剩下部分的文字在圖像的下面被顯示</p>
</body>
</html>

CSS代碼

p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: right;}

在瀏覽器上顯示如下效果

圖像在右側(cè)顯示，文字圍繞在圖像左側(cè)和下側(cè)。

CSS中如何使用float屬性

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享CSS中如何使用float屬性?xún)?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í)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：CSS中如何使用float屬性-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://jinyejixie.com/article16/hihdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、小程序開(kāi)發(fā)、企業(yè)建站、面包屑導(dǎo)航、網(wǎng)站排名、網(wǎng)站營(yíng)銷(xiāo)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

CSS中如何使用float屬性-創(chuàng)新互聯(lián)