頁面怎樣排版更加美觀？如何清除浮動標簽？

　　初學者在設計一個頁面時，默認的排版方式是將頁面中的標簽從上到下一一羅列。例如，圖1展示的就是采用默認排版方式的效果。

圖 1 模塊默認排列方式

　　通過這樣的布局制作出來的頁面布局參差不齊。然而大家在瀏覽網頁時，會發(fā)現頁面中的標簽通常會按照左、中、右的結構進行排版，如圖2所示。

圖 2 模塊浮動后的排列方式

通過這樣的布局，頁面會變得整齊有序。想要實現圖2所示的效果，就需要為標簽設置浮動屬性。下面將對浮動屬性的相關知識進行詳細講解。

1. 認識浮動

浮動是指設置了浮動屬性的標簽會脫離標準文檔流（標準文檔流指的是內容元素排版布局過程中，會自動從左往右，從上往下進行流式排列）的控制，移動到其父標簽中指定位置的過程。作為CSS的重要屬性，浮動被頻繁地應用在網頁制作中。在CSS中，通過float屬性來定義浮動，定義浮動的基本語法格式如下。

選擇器{float:屬性值;}

　　在上面的語法中，float常用的屬性值有三個，具體如表1所示。

　　表1 float的常用屬性值

　　2. 清除浮動

　　由于浮動標簽不再占用原文檔流的位置，所以它會對頁面中其他標簽的排版產生影響。例如，圖8-7中的段落文本，受到其周圍標簽浮動的影響，產生了圖文混排的效果。這時，如果要避免浮動對段落文本的影響，就需要在

標簽中清除浮動。在CSS中，常用clear屬性清除浮動。運用clear屬性清除浮動的基本語法格式如下。

選擇器{clear:屬性值;}

　　上述語法中，clear屬性的常用值有三個，具體如表2所示。

　　表2 clear的常用屬性值

　　需要注意的是，clear屬性只能清除標簽左右兩側浮動的影響。然而在制作網頁時，經常會受到一些特殊的浮動影響，例如，對子標簽設置浮動時，如果不對其父標簽定義高度，則子標簽的浮動會對父標簽產生影響

　　受到子標簽浮動的影響，沒有設置高度的父標簽變成了一條直線，即父標簽不能自適應子標簽的高度。由于子標簽和父標簽為嵌套關系，不存在左右位置，所以使用clear屬性并不能清除子標簽浮動對父標簽的影響。那么對于這種情況該如何清除浮動呢?為了使初學者在以后的工作中，能夠輕松地清除一些特殊的浮動影響，我們總結了常用的三種清除浮動的方法，具體介紹如下。

　　(1) 使用空標簽清除浮動

　　在浮動標簽之后添加空標簽，并對該標簽應用“clear:both”樣式，可清除標簽浮動所產生的影響，這個空標簽可以是