這篇文章主要介紹“CSS中的float怎么使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“CSS中的float怎么使用”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)公司主營邵東網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,邵東h5成都小程序開發(fā)搭建,邵東網(wǎng)站營銷推廣歡迎邵東等地區(qū)企業(yè)咨詢

CSS中float用法

◆float是什么意思？

float是浮動，翻譯成中文也是浮動意思。進(jìn)入對應(yīng)CSS手冊中float手冊了解float基本信息。

◆float的作用

通過CSS定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動。

◆float語法：

float:none|left|right

◆參數(shù)值：
none:　對象不浮動
left:　對象浮在左邊
right:　對象浮在右邊

接下來我們來通過一個DIV+CSS實例講解float使用技巧。

DIV CSS實驗一

CSS樣式實例內(nèi)容，我們讓文字和圖片在一個固定寬度div層內(nèi)，讓藍(lán)色背景文字內(nèi)容居右，小圖片居左。

CSS案例演示最終效果圖如下

1、首先我們設(shè)置一個最外層的寬度為300px，高度為200px的CSS命名為box的CSS選擇器代碼如下（知識點px是什么意思）

.box{width:300px;height:200px;}

2、設(shè)置box內(nèi)的文字內(nèi)容部分CSS樣式命名為yangshi，并設(shè)置背景為藍(lán)色，寬度為120px，居右浮動

.yangshi{width:120px;float:right;background:#0066FF;}

3、設(shè)置圖片居左浮動DIV+CSS樣式

img{float:left;}

4、body內(nèi)的div布局，代碼如下

<divclassdivclass="box"> <divclassdivclass="yangshi">我是www.divCSS5.com網(wǎng)站，測試內(nèi)容div> <imgsrcimgsrc="demo.gif"/> div>

說明：這里img標(biāo)簽是鏈接外部圖片，圖片名為demo.gif

最終演示結(jié)果截圖

DIV CSS實驗二

接下來我們演示使用DIV+CSS讓這里小圖片居右（上個例子是居左），藍(lán)色背景文字內(nèi)容區(qū)居左（上個例子是居右）(擴(kuò)展CSS居中)。這里我們只需要改變yangshi的float:right;為float:left和圖片CSS樣式img{float:left;}為img{float:right;}

CSS代碼如下：

.box{width:300px;height:200px;}  .yangshi{width:120px;float:right;background:#0066FF;}  img{float:left;}

html中的CSS代碼和內(nèi)容不變

最終演示結(jié)果截圖如下：

關(guān)于“CSS中的float怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

網(wǎng)頁名稱：CSS中的float怎么使用
當(dāng)前鏈接：http://jinyejixie.com/article30/gpejpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站制作、品牌網(wǎng)站制作、、網(wǎng)站維護(hù)、建站公司

廣告

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