頁面布局的排列規(guī)則是什么？怎樣清除浮動標(biāo)簽？

　　初學(xué)者在設(shè)計一個頁面時，默認(rèn)的排版方式是將頁面中的標(biāo)簽從上到下一一羅列。例如，圖1展示的就是采用默認(rèn)排版方式的效果。

圖 1 模塊默認(rèn)排列方式

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

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

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

1. 認(rèn)識浮動

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

選擇器{float:屬性值;}

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

　　表1 float的常用屬性值

　　2. 清除浮動

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

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

選擇器{clear:屬性值;}

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

　　表2 clear的常用屬性值

　　需要注意的是，clear屬性只能清除標(biāo)簽左右兩側(cè)浮動的影響。然而在制作網(wǎng)頁時，經(jīng)常會受到一些特殊的浮動影響，例如，對子標(biāo)簽設(shè)置浮動時，如果不對其父標(biāo)簽定義高度，則子標(biāo)簽的浮動會對父標(biāo)簽產(chǎn)生影響

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

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

　　在浮動標(biāo)簽之后添加空標(biāo)簽，并對該標(biāo)簽應(yīng)用“clear:both”樣式，可清除標(biāo)簽浮動所產(chǎn)生的影響，這個空標(biāo)簽可以是<div>、<p>、<hr /> 等任何標(biāo)簽。

　　子標(biāo)簽浮動對父標(biāo)簽的影響已經(jīng)不存在。需要注意的是，上述方法雖然可以清除浮動，但是增加了毫無意義的結(jié)構(gòu)標(biāo)簽，因此在實際工作中不建議使用。

　　(2) 使用overflow屬性清除浮動

　　對標(biāo)簽應(yīng)用“overflow:hidden;”樣式，也可以清除浮動對該標(biāo)簽的影響，這種方式還彌補了空標(biāo)簽清除浮動的不足。

　　子標(biāo)簽浮動對父標(biāo)簽的影響已經(jīng)不存在。需要注意的是，在使用“overflow:hidden;”樣式清除浮動時，一定要將該樣式寫在被影響的標(biāo)簽中。除了“hidden”，overflow屬性還有其他屬性值，我們將會在后面的小節(jié)中詳細(xì)講解。

　　(3) 使用after偽對象清除浮動

　　使用after偽對象也可以清除浮動，但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。使用after偽對象清除浮動時有以下注意事項。

　　● 必須為需要清除浮動的標(biāo)簽偽對象設(shè)置“height:0;”樣式，否則該標(biāo)簽會比其實際高度高出若干像素。

　　●必須在偽對象中設(shè)置content屬性，屬性值可以為空，如“content: "";”。

　　
猜你喜歡：  
JavaScript腳本文件引入方法講解
盒子模型的邊框樣式屬性和應(yīng)用技巧講解
web前端培訓(xùn)