您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS中的float怎么使用”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“CSS中的float怎么使用”文章能幫助大家解決問題。
CSS中float用法
◆float是什么意思?
float是浮動(dòng),翻譯成中文也是浮動(dòng)意思。進(jìn)入對(duì)應(yīng)CSS手冊(cè)中float手冊(cè)了解float基本信息。
◆float的作用
通過CSS定義float(浮動(dòng))讓div樣式層塊,向左或向右(靠)浮動(dòng)。
◆float語法:
float:none|left|right
◆參數(shù)值:
none: 對(duì)象不浮動(dòng)
left: 對(duì)象浮在左邊
right: 對(duì)象浮在右邊
接下來我們來通過一個(gè)DIV+CSS實(shí)例講解float使用技巧。
DIV CSS實(shí)驗(yàn)一
CSS樣式實(shí)例內(nèi)容,我們讓文字和圖片在一個(gè)固定寬度div層內(nèi),讓藍(lán)色背景文字內(nèi)容居右,小圖片居左。
CSS案例演示最終效果圖如下
1、首先我們?cè)O(shè)置一個(gè)最外層的寬度為300px,高度為200px的CSS命名為box的CSS選擇器代碼如下(知識(shí)點(diǎn)px是什么意思)
.box{width:300px;height:200px;}
2、設(shè)置box內(nèi)的文字內(nèi)容部分CSS樣式命名為yangshi,并設(shè)置背景為藍(lán)色,寬度為120px,居右浮動(dòng)
.yangshi{width:120px;float:right;background:#0066FF;}
3、設(shè)置圖片居左浮動(dòng)DIV+CSS樣式
img{float:left;}
4、body內(nèi)的div布局,代碼如下
<divclassdivclass="box"> <divclassdivclass="yangshi">我是www.divCSS5.com網(wǎng)站,測(cè)試內(nèi)容div> <imgsrcimgsrc="demo.gif"/> div>
說明:這里img標(biāo)簽是鏈接外部圖片,圖片名為demo.gif
最終演示結(jié)果截圖
DIV CSS實(shí)驗(yàn)二
接下來我們演示使用DIV+CSS讓這里小圖片居右(上個(gè)例子是居左),藍(lán)色背景文字內(nèi)容區(qū)居左(上個(gè)例子是居右)(擴(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)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。