本文和大家重點(diǎn)討論一下DIV CSS中float用法，通過(guò)CSS定義float（浮動(dòng)）讓div樣式層塊，向左或向右（靠）浮動(dòng)。

DIV CSS中float用法

◆float是什么意思？

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

◆float的作用

通過(guò)CSS定義float（浮動(dòng)）讓div樣式層塊，向左或向右（靠）浮動(dòng)。

◆float語(yǔ)法：

float:none|left|right

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

接下來(lái)我們來(lái)通過(guò)一個(gè)DIV+CSS實(shí)例講解float使用技巧。#p#

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> 
 

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

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

#p#

DIV CSS實(shí)驗(yàn)二

接下來(lái)我們演示使用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é)果截圖如下：

【編輯推薦】

1. 不用float也能實(shí)現(xiàn)DIV模塊居中布局
2. IE6、IE7、Firefox中margin問(wèn)題解決辦法
3. Float構(gòu)建三欄DIV CSS網(wǎng)頁(yè)布局
4. CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
5. DIV CSS網(wǎng)頁(yè)布局需要掌握的八大技巧