css float元素的浮動屬性|蘿卜系統下載站

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

【實例介紹】

css float元素的浮動屬性

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

【基本語法】

fioat：none | left | right | inherit

【語法介紹】

none：默認值，元素不浮動，并會顯示其在文本中出現的位置；
left：表示元素向左浮動；
right：表示元素向右浮動；
inherit：規定應該從父元素繼承float屬性的值，IE 8及以下的版本目前都不支持屬性值“inherit”。

【實例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>float屬性---沒有設置任何浮動</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{
/* 這里設置son1的浮動方式*/
}
.son2{
/* 這里設置son1的浮動方式*/
}
.son3{
/* 這里設置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都沒有設置任何浮動屬性，在父盒子中，4個盒子各自向右伸展，豎直方向依次排列，效果如圖所示。

元素的浮動屬性float運行效果

（1）、設置第1個浮動的div

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

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

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

設置第1個浮動的div運行效果