當(dāng)前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > DIV+CSS > css float元素的浮動屬性

css float元素的浮動屬性

2012/11/26 19:10:14作者:佚名來源:網(wǎng)絡(luò)

移動端

【實(shí)例介紹】

css float元素的浮動屬性

浮動屬性是css布局的最佳利器,可以通過不同的浮動屬性值靈活地定位div元素.以達(dá)到靈活布局網(wǎng)頁的目的。我們可以通過CSS的屬性float使元素向左或向右浮動。也就是說,讓盒子及其中的內(nèi)容浮動到文檔的右邊或者左邊。以往這個屬性總應(yīng)用于圖像,使文本圍繞在圖像周圍,不過在CSS中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。

【基本語法】

fioat:none  |   left  |   right  |    inherit

【語法介紹】

none:默認(rèn)值,元素不浮動,并會顯示其在文本中出現(xiàn)的位置;
left:表示元素向左浮動;
right:表示元素向右浮動;
inherit:規(guī)定應(yīng)該從父元素繼承float屬性的值,IE 8及以下的版本目前都不支持屬性值“inherit”。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>float屬性---沒有設(shè)置任何浮動</title> <style type="text/css"> body{  margin:20px;  font-family:Arial; font-size:14px;  } #father{  background-color:#33bb00;  border:5px solid #111111;  padding:8px;      } #father div{  padding:15px;      margin:15px;       border:2px dashed #111111;  background-color:#90baff;  } #father p{  border:3px dashed #111111;  background-color:#FFCC66;  } .son1{ /* 這里設(shè)置son1的浮動方式*/ } .son2{ /* 這里設(shè)置son1的浮動方式*/ } .son3{ /* 這里設(shè)置son1的浮動方式*/ } </style> </head> <body>  <div id="father">   <div class="son1">box1</div>   <div class="son2">box2</div>   <div class="son3">box3</div>   <p>這里是浮動框外圍的文字,這里是浮動框外圍的文字,這里是浮動框外圍的文字,這里是浮動框外圍的文字,這里是浮動框外圍的文字,這里是浮動框外圍的文字,這里是浮動框外圍的文字,這里是浮動框外圍的文字,這里是浮動框外圍的文字.</p>  </div> </body> </html>

【代碼分析】

上面的代碼定義了4個<div>塊,其中一個父塊,另外3個是它的子塊。為了便于觀察,將各個塊都加上了邊框以及背景顏色,并且讓body以及各個div有一定的margin值。如果3個div都沒有設(shè)置任何浮動屬性,在父盒子中,4個盒子各自向右伸展,豎直方向依次排列,效果如圖所示。

元素的浮動屬性float運(yùn)行效果

(1)、設(shè)置第1個浮動的div

下面將第一個div設(shè)置為浮動,在上面的代碼中找到:
·sonl{
/*這里設(shè)置sonl的浮動方式*/
}

將.sonl盒子設(shè)置為向左浮動,代碼如下:
·sonl{
/*這里設(shè)置sonl的浮動方式*/
float:left;
}

這時效果如圖所示??梢钥吹絙ox2的文字圍繞著boxl排列,而此時浮動的盒子boxl的寬度不再延伸,其寬度為容納內(nèi)容的最小寬度。

設(shè)置第1個浮動的div運(yùn)行效果

(2)、設(shè)置第2個浮動的div

下面對第2個浮動的div設(shè)為left,將.son2盒子設(shè)置為向左浮動,代碼如下:

·son2{
/*這里設(shè)置son2的浮動方式*/
float:left;
}

這時瀏覽效果如圖所示。可以看到box2也變?yōu)楦鶕?jù)內(nèi)容確定寬度,并使box3的文字圍繞box2排列。boxl與box2之間的空間是由二者之間的margin構(gòu)成的。

設(shè)置第2個浮動的div運(yùn)行效果

(3)、設(shè)置第3個浮動的div

下面把box3也設(shè)置為左浮動,將.son3盒子設(shè)置為向左浮動,代碼如下:
·son3{
/*這里設(shè)置son3的浮動方式*/
float:left;
}

這時效果如圖所示??梢钥吹轿淖炙诘暮凶臃秶?,以及文字會圍繞浮動的盒子排列。

設(shè)置第3個浮動的div運(yùn)行效果

(4)、改變浮動的方向

CSS中很多時候會用到浮動來布局,也就是經(jīng)常見到的float:left或者float:right,下面看看改變box3浮動方向,即float:right,這時效果如圖所示??梢钥吹絙ox3移動到了最右端,文字段落盒子的范圍沒有改變,但文字變成了夾在box2和box3之間。

改變浮動的方向運(yùn)行效果

 【素材及源碼下載】

請點(diǎn)擊:元素的浮動屬性css float 下載本實(shí)例相關(guān)素材及源碼

 

標(biāo)簽: css float  元素  浮動屬性