更新時(shí)間:2020-11-19 來(lái)源:黑馬程序員 瀏覽量:
初學(xué)者在設(shè)計(jì)一個(gè)頁(yè)面時(shí),默認(rèn)的排版方式是將頁(yè)面中的標(biāo)簽從上到下一一羅列。例如,圖1展示的就是采用默認(rèn)排版方式的效果。
圖 1 模塊默認(rèn)排列方式
通過(guò)這樣的布局制作出來(lái)的頁(yè)面布局參差不齊。然而大家在瀏覽網(wǎng)頁(yè)時(shí),會(huì)發(fā)現(xiàn)頁(yè)面中的標(biāo)簽通常會(huì)按照左、中、右的結(jié)構(gòu)進(jìn)行排版,如圖2所示。
圖 2 模塊浮動(dòng)后的排列方式
通過(guò)這樣的布局,頁(yè)面會(huì)變得整齊有序。想要實(shí)現(xiàn)圖2所示的效果,就需要為標(biāo)簽設(shè)置浮動(dòng)屬性。下面將對(duì)浮動(dòng)屬性的相關(guān)知識(shí)進(jìn)行詳細(xì)講解。
1. 認(rèn)識(shí)浮動(dòng)
浮動(dòng)是指設(shè)置了浮動(dòng)屬性的標(biāo)簽會(huì)脫離標(biāo)準(zhǔn)文檔流(標(biāo)準(zhǔn)文檔流指的是內(nèi)容元素排版布局過(guò)程中,會(huì)自動(dòng)從左往右,從上往下進(jìn)行流式排列)的控制,移動(dòng)到其父標(biāo)簽中指定位置的過(guò)程。作為CSS的重要屬性,浮動(dòng)被頻繁地應(yīng)用在網(wǎng)頁(yè)制作中。在CSS中,通過(guò)float屬性來(lái)定義浮動(dòng),定義浮動(dòng)的基本語(yǔ)法格式如下。
選擇器{float:屬性值;}
在上面的語(yǔ)法中,float常用的屬性值有三個(gè),具體如表1所示。
表1 float的常用屬性值
2. 清除浮動(dòng)
由于浮動(dòng)標(biāo)簽不再占用原文檔流的位置,所以它會(huì)對(duì)頁(yè)面中其他標(biāo)簽的排版產(chǎn)生影響。例如,圖8-7中的段落文本,受到其周?chē)鷺?biāo)簽浮動(dòng)的影響,產(chǎn)生了圖文混排的效果。這時(shí),如果要避免浮動(dòng)對(duì)段落文本的影響,就需要在
標(biāo)簽中清除浮動(dòng)。在CSS中,常用clear屬性清除浮動(dòng)。運(yùn)用clear屬性清除浮動(dòng)的基本語(yǔ)法格式如下。
選擇器{clear:屬性值;}
上述語(yǔ)法中,clear屬性的常用值有三個(gè),具體如表2所示。
表2 clear的常用屬性值
需要注意的是,clear屬性只能清除標(biāo)簽左右兩側(cè)浮動(dòng)的影響。然而在制作網(wǎng)頁(yè)時(shí),經(jīng)常會(huì)受到一些特殊的浮動(dòng)影響,例如,對(duì)子標(biāo)簽設(shè)置浮動(dòng)時(shí),如果不對(duì)其父標(biāo)簽定義高度,則子標(biāo)簽的浮動(dòng)會(huì)對(duì)父標(biāo)簽產(chǎn)生影響
受到子標(biāo)簽浮動(dòng)的影響,沒(méi)有設(shè)置高度的父標(biāo)簽變成了一條直線(xiàn),即父標(biāo)簽不能自適應(yīng)子標(biāo)簽的高度。由于子標(biāo)簽和父標(biāo)簽為嵌套關(guān)系,不存在左右位置,所以使用clear屬性并不能清除子標(biāo)簽浮動(dòng)對(duì)父標(biāo)簽的影響。那么對(duì)于這種情況該如何清除浮動(dòng)呢?為了使初學(xué)者在以后的工作中,能夠輕松地清除一些特殊的浮動(dòng)影響,我們總結(jié)了常用的三種清除浮動(dòng)的方法,具體介紹如下。
(1) 使用空標(biāo)簽清除浮動(dòng)
在浮動(dòng)標(biāo)簽之后添加空標(biāo)簽,并對(duì)該標(biāo)簽應(yīng)用“clear:both”樣式,可清除標(biāo)簽浮動(dòng)所產(chǎn)生的影響,這個(gè)空標(biāo)簽可以是<div>、<p>、<hr /> 等任何標(biāo)簽。
子標(biāo)簽浮動(dòng)對(duì)父標(biāo)簽的影響已經(jīng)不存在。需要注意的是,上述方法雖然可以清除浮動(dòng),但是增加了毫無(wú)意義的結(jié)構(gòu)標(biāo)簽,因此在實(shí)際工作中不建議使用。
(2) 使用overflow屬性清除浮動(dòng)
對(duì)標(biāo)簽應(yīng)用“overflow:hidden;”樣式,也可以清除浮動(dòng)對(duì)該標(biāo)簽的影響,這種方式還彌補(bǔ)了空標(biāo)簽清除浮動(dòng)的不足。
子標(biāo)簽浮動(dòng)對(duì)父標(biāo)簽的影響已經(jīng)不存在。需要注意的是,在使用“overflow:hidden;”樣式清除浮動(dòng)時(shí),一定要將該樣式寫(xiě)在被影響的標(biāo)簽中。除了“hidden”,overflow屬性還有其他屬性值,我們將會(huì)在后面的小節(jié)中詳細(xì)講解。
(3) 使用after偽對(duì)象清除浮動(dòng)
使用after偽對(duì)象也可以清除浮動(dòng),但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。使用after偽對(duì)象清除浮動(dòng)時(shí)有以下注意事項(xiàng)。
● 必須為需要清除浮動(dòng)的標(biāo)簽偽對(duì)象設(shè)置“height:0;”樣式,否則該標(biāo)簽會(huì)比其實(shí)際高度高出若干像素。
●必須在偽對(duì)象中設(shè)置content屬性,屬性值可以為空,如“content: "";”。
猜你喜歡:
JavaScript腳本文件引入方法講解
盒子模型的邊框樣式屬性和應(yīng)用技巧講解
web前端培訓(xùn)