在網頁布局的過程中，常常遇到圖文混排的效果。圖文混排，也就是文字環繞著圖片進行布局。文字環繞圖片的方式在實際頁面中的應用非常廣泛，如果再配合內容、背景等多種手段便可以實現各種絢麗的效果。
在CSS中，使用浮動屬性float可以設置文字在某個元素的周圍，它能應用於所有的元素。
語法：
float:取值;
說明：
float屬性的取值很簡單也很容易記憶，就2個屬性值：
默認情況下，元素是不浮動的。這個表忽略“none”和“inherit”這2個一輩子派不上場的屬性值，大家也不需要花心思去理會“none”和“inherit”這2個屬性值。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS浮動float屬性</title>
<style type="text/css">
img{float:left;}
p{font-size:16px;text-indent:28px;}
</style>
</head>
<body>
<img src="images/ailianshuo.jpg" alt=""/>
<p>水陸草木之花，可愛者甚蕃。晉陶淵明獨愛菊。自李唐來，世人甚愛牡丹。予獨愛蓮之出淤泥而不染，濯清漣而不妖，中通外直，不蔓不枝，香遠益清，亭亭淨植，可遠觀而不可亵玩焉。予謂菊，花之隱逸者也；牡丹，花之富貴者也；蓮，花之君子者也。噫！菊之愛，陶後鮮有聞；蓮之愛，同予者何人? 牡丹之愛，宜乎眾矣。</p>
</body>
</html>
在浏覽器預覽效果如下：
分析：
細心的讀者可能會發現，文本的頂部與圖片的頂部怎麼不水平對齊，就像下圖那樣呢？
這是由於在某些浏覽器下，p元素具有默認樣式，就像strong元素默認加粗一樣。要實現上圖那樣的效果，這就要去除元素的浏覽器默認樣式。對於如何去除元素的浏覽器默認樣式，我們可以在“CSS進階教程”的“CSS reset”這一節學習到。現在大家不需要理會，循序漸進地跟著學習就行了。
此外，大家可以在上面例子的“在線代碼測試工具”中，將“float:left;”改為“float:right”，看看效果是怎樣的。
文字緊緊環繞在圖片周圍，如果希望圖片本身與文字有一定的距離，只需要給<img>標簽添加margin屬性即可。margin指的是“外邊距”，我們在接下來的“CSS盒子模型”會詳細講解到。
margin屬性包括margin-top（上外邊距）、margin-bottom（下外邊距）、margin-left（左外邊距）、margin-right（右外邊距）。
語法：
margin-top:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-right:像素值;
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS浮動float屬性</title>
<style type="text/css">
img{margin-right:20px;margin-bottom:20px;float:left;}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/ailianshuo.jpg" alt=""/>
<p>水陸草木之花，可愛者甚蕃。晉陶淵明獨愛菊。自李唐來，世人甚愛牡丹。予獨愛蓮之出淤泥而不染，濯清漣而不妖，中通外直，不蔓不枝，香遠益清，亭亭淨植，可遠觀而不可亵玩焉。予謂菊，花之隱逸者也；牡丹，花之富貴者也；蓮，花之君子者也。噫！菊之愛，陶後鮮有聞；蓮之愛，同予者何人? 牡丹之愛，宜乎眾矣。</p>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“img{margin-right:20px;margin-bottom:20px;}”表示設置圖片img元素的右邊距為20px，下邊距也是20px。
在“CSS盒子模型”這一章，我們會詳細講解margin屬性。