DIV CSS中float用法探究
本文和大家重點討論一下DIV CSS中float用法,通過CSS定義float(浮動)讓div樣式層塊,向左或向右(靠)浮動。
DIV CSS中float用法
◆float是什么意思?
float是浮動,翻譯成中文也是浮動意思。進入對應CSS手冊中float手冊了解float基本信息。
◆float的作用
通過CSS定義float(浮動)讓div樣式層塊,向左或向右(靠)浮動。
◆float語法:
float:none|left|right
◆參數(shù)值:
none: 對象不浮動
left: 對象浮在左邊
right: 對象浮在右邊
接下來我們來通過一個DIV+CSS實例講解float使用技巧。#p#
DIV CSS實驗一
CSS樣式實例內(nèi)容,我們讓文字和圖片在一個固定寬度div層內(nèi),讓藍色背景文字內(nèi)容居右,小圖片居左。
CSS案例演示最終效果圖如下

1、首先我們設置一個最外層的寬度為300px,高度為200px的CSS命名為box的CSS選擇器代碼如下(知識點px是什么意思)
- .box{width:300px;height:200px;}
2、設置box內(nèi)的文字內(nèi)容部分CSS樣式命名為yangshi,并設置背景為藍色,寬度為120px,居右浮動
- .yangshi{width:120px;float:right;background:#0066FF;}
3、設置圖片居左浮動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標簽是鏈接外部圖片,圖片名為demo.gif
最終演示結(jié)果截圖
#p#
DIV CSS實驗二
接下來我們演示使用DIV+CSS讓這里小圖片居右(上個例子是居左),藍色背景文字內(nèi)容區(qū)居左(上個例子是居右)(擴展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é)果截圖如下:

【編輯推薦】
- 不用float也能實現(xiàn)DIV模塊居中布局
- IE6、IE7、Firefox中margin問題解決辦法
- Float構(gòu)建三欄DIV CSS網(wǎng)頁布局
- CSS兼容:解決IE6、IE7和IE8的兼容問題妙招
- DIV CSS網(wǎng)頁布局需要掌握的八大技巧

















