css float元素的浮動(dòng)屬性

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

移動(dòng)端

【實(shí)例介紹】

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

【基本語法】

fioat：none | left | right | inherit

【語法介紹】

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

【實(shí)例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>float屬性---沒有設(shè)置任何浮動(dòng)</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的浮動(dòng)方式*/
}
.son2{
/* 這里設(shè)置son1的浮動(dòng)方式*/
}
.son3{
/* 這里設(shè)置son1的浮動(dòng)方式*/
}
</style>
</head>
<body>
 <div id="father">
  <div class="son1">box1</div>
  <div class="son2">box2</div>
  <div class="son3">box3</div>
  <p>這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字，這里是浮動(dòng)框外圍的文字.</p>
 </div>
</body>
</html>

【代碼分析】

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

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

（1）、設(shè)置第1個(gè)浮動(dòng)的div

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

將．sonl盒子設(shè)置為向左浮動(dòng)，代碼如下：
·sonl{
/*這里設(shè)置sonl的浮動(dòng)方式*/
float：left;
}

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

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

（2）、設(shè)置第2個(gè)浮動(dòng)的div

下面對(duì)第2個(gè)浮動(dòng)的div設(shè)為left，將．son2盒子設(shè)置為向左浮動(dòng)，代碼如下：

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

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

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

（3）、設(shè)置第3個(gè)浮動(dòng)的div

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

這時(shí)效果如圖所示?？梢钥吹轿淖炙诘暮凶臃秶?，以及文字會(huì)圍繞浮動(dòng)的盒子排列。

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

（4）、改變浮動(dòng)的方向

CSS中很多時(shí)候會(huì)用到浮動(dòng)來布局，也就是經(jīng)常見到的float：left或者float：right，下面看看改變box3浮動(dòng)方向，即float：right，這時(shí)效果如圖所示。可以看到box3移動(dòng)到了最右端，文字段落盒子的范圍沒有改變，但文字變成了夾在box2和box3之間。

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