在“文字環繞效果-初識float”這一節，我們已經接觸過浮動是怎樣一回事了。
在傳統的印刷布局中，文本可以按照實際需要來圍繞圖片。一般把這種方式稱為“文本環繞”。在網頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局裡被文字包圍的圖片一樣。
浮動屬性float是CSS布局的最佳利器，我們可以通過不同的浮動屬性值靈活地定位div元素，以達到布局網頁的目的。我們可以通過CSS的屬性float使元素向左或向右浮動。也就是說，讓盒子及其中的內容浮動到文檔的右邊或者左邊。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
語法：
float:取值;
說明：
float屬性的取值很簡單也很容易記憶，就2個屬性值：
默認情況下，元素是不浮動的。這個表忽略“none”和“inherit”這2個一輩子派不上場的屬性值，大家也不需要花心思去理會“none”和“inherit”這2個屬性值。
浮動的性質比較復雜，下面通過一個簡單的實例講解float屬性的使用。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS浮動float屬性</title>
<style type="text/css">
/*定義父元素樣式*/
#father
{
width:400px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定義子元素樣式*/
#father div
{
padding:10px;
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
/*定義文本樣式*/
#father p
{
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
#son1
{
/*這裡設置son1的浮動方式*/
}
#son2
{
/*這裡設置son2的浮動方式*/
}
#son3
{
/*這裡設置son3的浮動方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
<p>這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，</p>
</div>
</body>
</html>
上面代碼定義了4個div塊，一個是父塊，另外3個是它的子塊。為了便於觀察，將各個塊都加上了邊框以及背景顏色，並且讓body以及各個div有一定的margin（外邊距）。
如果3個子塊都沒有設置浮動方式，在父盒子中，由於div元素是塊元素，因此4個盒子各自向右伸展，並且自上而下排列，如下圖：
#son1
{
/*這裡設置son1的浮動方式*/
float:left;
}
在浏覽器預覽效果如下：
分析：
由於box1設置為左浮動，box1變成了浮動元素，因此此時box1的寬度不再延伸，其寬度為容納內容的最小寬度，而相鄰的下一個div元素（box2）就會緊貼著box1，這是由於浮動引起的效果。
大家可以在“在線代碼測試工具”工具中，設置一下box1右浮動，看看是怎樣的。
#son2
{
/*這裡設置son2的浮動方式*/
float:left;
}
在浏覽器預覽效果如下：
分析：
由於box2變成了浮動元素，因此box2也跟box1一樣，寬度不再延伸，而是由內容確定寬度。並且相鄰的下一個div元素（box3）變成緊貼著浮動的box2。
大家會覺得很奇怪，為什麼這個時候box1和box2之間有一定的距離呢？其實原因是這樣的：我們在CSS中設置了box1、box2和box3都有一定的外邊距（margin:15px;），如果box1為浮動元素，而相鄰的box2不是浮動元素，則box2就會緊貼著box1；但是如果box1和box2同時為浮動元素，外邊距就會生效。這是由於浮動元素的特性決定的。大家不需要深究這個問題。“浮動”這個復雜的性質，我們只需要多加練習，慢慢就會感性認知它的各種性質。
在這裡，大家可以在在線工具中，設置一下box2右浮動，看看是怎樣的。
#son3
{
/*這裡設置son3的浮動方式*/
float:left;
}
在浏覽器預覽效果如下：
分析：
由於box3變成了浮動元素，因此box3跟box2和box1一樣，寬度不再延伸，而是由內容確定寬度，並且相鄰的下一個p元素（box3）變成緊貼著浮動的box3。
由於box1、box2和box3都是浮動元素，box1、box2和box3之間的margin屬性生效。
在這裡，我們將box3浮動方式改為“float:right”，在浏覽器預覽效果如下：
float屬性是CSS布局中非常重要的屬性，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素，如導航等進行排列。
浮動，這個屬性對於初學者來說，並不能立刻掌握，需要經歷過大量的練習，然後細細體會這些訓練中。本教程精選了大量的練習，希望讀者細細體會。