css float元素的浮動屬性

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

移動端

【實例介紹】

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”。

【實例代碼】


<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)行效果