1.元素的浮動屬性float
浮動屬性作為CSS3的重要屬性，在網頁布局中至關重要。在CSS中，通過float屬性來定義浮動，所謂元素的浮動是指設置了浮動屬性的元素會脫離標准文檔流的控制，移動到其父元素中指定位置的過程。
其基本語法格式為：
選擇器{float： 屬性值；}
在上面的語法中，常用的float屬性值有3個，具體如下
| 屬性值 | 描述 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 元素不浮動（默認值） |
示例：
在上例中，所有元素均不設置float屬性，也就是說元素float屬性值都能為其默認值none。
效果圖：
在圖中，box01、box02、box03及段落文本從上到下ー一羅列。可見如果不對元素設置浮動，則該元素及其內部的子元素將按照標准文檔流的樣式顯示，即塊元素占據頁面整行。
接下來，在上例的基礎上演示元素的左浮動效果。以box01為設置對象，對其應用左浮動樣式，具體CSS代碼如下：
效果圖：
在上面的效果容易看出，設置左浮動的box01漂浮到了box02的左側，也就是說box01不在受到文檔流控制，出現在了一個新的層次上。
下面，在上述案例的基礎上。繼續給box2設置左浮動。具體CSS代碼如下：
效果如下：
在圖中，box01、boxo2、boxo3三個盒子整齊地排列在同一行，可見通過應用“float:left”樣式可以使box01和box02同時脫離標准文檔流的控制向左漂浮。
繼續給box03設置左浮動，具體CSS代碼如下：
在圖中，box01、box02、box03三個盒子排列在同一行，同時，周圍的段落文本將環繞盒子，出現了圖文混排的網頁效果。需要說明的是，float的另一個屬性值“right”在網頁布局時也會經常用到，它與“left"屬性值的用法相同但方向相反。應用了“float: right”"樣式的元素將向右側浮動。
2.清除浮動
在網頁中，由於浮動元素不再占用原文檔流的位置，使用浮動時會影響后面相鄰的固定素。例如上圖中的段落文本，受到其周圍元素浮動的影響，產生了位置上的變化。這時，如果要避免浮動對其他元素的影響，就需要清除浮動。在CSS中，使用 clear屬性清除浮動
其基本語法格式如下。
選擇器 {clear：屬性值；}
clear的常用屬性值如下：
| 屬性值 | 描述 |
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除左側浮動的影響） |
| both | 同時清除兩側浮動 |
代碼：
效果：
通過圖中可以看出，清除段落文本左側的浮動后，段落文本不再受到浮動元素的影響，而是按照元素自身的默認排列方式，獨占一行，排列在浮動元素下面。
需要注意的是，clear屬性只能清除元素左右兩側浮動的影響。然而在制作網頁時，經常會遇到一些特殊的浮動影響。例如，對子元素設置浮動時，如果不對其父元素定義高度，則子元素的浮動會對父元素產生影響。