浮動(dòng)和定位第6章匯報(bào)人：***目錄CONTENT元素的浮動(dòng)清除浮動(dòng)元素的定位本章導(dǎo)讀在網(wǎng)頁(yè)中，文檔流是以默認(rèn)的方向，即從上到下，從左向右流動(dòng)的，如果是行內(nèi)元素，當(dāng)創(chuàng)建完一個(gè)元素后，可在其右側(cè)繼續(xù)創(chuàng)建其他元素；而對(duì)于塊元素，在創(chuàng)建完一個(gè)元素后，會(huì)在其下方繼續(xù)創(chuàng)建其他元素，通常，采用這種默認(rèn)的文檔流搭建的結(jié)構(gòu)看起來(lái)死板，不美觀，達(dá)不到預(yù)期的效果。元素的浮動(dòng)和定位是網(wǎng)頁(yè)布局中的重要知識(shí)，通過(guò)元素浮動(dòng)和元素定位進(jìn)行更多樣化的布局。本章將詳細(xì)介紹元素浮動(dòng)和清除浮動(dòng)，元素定位中的相對(duì)定位、絕對(duì)定位和固定定位等，為布局美化網(wǎng)頁(yè)打下堅(jiān)定的基礎(chǔ)。第一節(jié)PART.01元素的浮動(dòng)在

CSS中，通過(guò)

float屬性定義浮動(dòng)，所謂元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過(guò)程，其基本語(yǔ)法格式如下：選擇器{float:屬性值;}常用屬性值及含義如下：left

：對(duì)象居左浮動(dòng)，文本流向?qū)ο蟮挠覀?cè)。right

：對(duì)象居右浮動(dòng)，文本流向?qū)ο蟮淖髠?cè)。none

：對(duì)象不浮動(dòng)，默認(rèn)值?！纠?.1】float屬性的用法，首先為3個(gè)

<div>標(biāo)記設(shè)置寬高和背景顏色，其代碼如下：運(yùn)行結(jié)果如圖6-1所示，三個(gè)盒子依次由上而下排列，符合標(biāo)準(zhǔn)流的布局樣式。接下來(lái)，修改第一個(gè)盒子的樣式代碼，為其添加浮動(dòng)樣式，其代碼如下，效果如圖6-2所示。float:left;圖6-1標(biāo)準(zhǔn)流布局圖6-2浮動(dòng)應(yīng)用1由運(yùn)行效果可以看出，由于為第一個(gè)盒子設(shè)置了左浮動(dòng)樣式，因此使其脫離標(biāo)準(zhǔn)流，其后面的元素會(huì)自動(dòng)向上流，直到上邊緣與第一個(gè)盒子重合。接下來(lái)，修改第二個(gè)盒子的樣式代碼，為其添加左浮動(dòng)樣式，其代碼如下：float:left;保存

HTML文件后，刷新頁(yè)面，效果顯示如圖6-3所示。第二個(gè)盒子排列到第一個(gè)盒子的右側(cè)，與第一個(gè)盒子在同一行顯示，且都脫離標(biāo)準(zhǔn)流，第三個(gè)盒子自動(dòng)向上流，直到上邊緣與第一個(gè)盒子重合。同理，修改第三個(gè)盒子的樣式代碼，為其添加左浮動(dòng)樣式，保存

HTML文件，刷新頁(yè)面，效果如圖6-4所示。圖6-3浮動(dòng)應(yīng)用2圖6-4浮動(dòng)應(yīng)用3觀察圖6-4運(yùn)行效果，我們發(fā)現(xiàn)與預(yù)期效果有所不同，第三個(gè)盒子沒(méi)有移到第二個(gè)盒子的右側(cè)，原因是第二個(gè)盒子右側(cè)所預(yù)留的空間不能夠滿足第三個(gè)盒子的寬度。此時(shí)，浮動(dòng)的盒子會(huì)自動(dòng)換行到下方顯示。調(diào)整瀏覽器窗口的寬度后，效果如圖6-5所示。圖6-5浮動(dòng)應(yīng)用4第二節(jié)PART.02清除浮動(dòng)在網(wǎng)頁(yè)中，當(dāng)一個(gè)元素被設(shè)為浮動(dòng)后，就不再占用原文檔流的位置，與該元素相鄰的其他元素，會(huì)受到浮動(dòng)的影響，產(chǎn)生位置上的變化，這時(shí)，如果要避免浮動(dòng)對(duì)其他元素的影響，就需要清除浮動(dòng)，在

CSS中，使用

clear屬性清除浮動(dòng)，其基本語(yǔ)法格式如下：選擇器{clear:屬性值;}常用的

clear屬性值及含義如下：left

：清除左側(cè)浮動(dòng)的影響。right

：清除右側(cè)浮動(dòng)的影響。none

：不清除浮動(dòng)，該值為默認(rèn)值。both

：同時(shí)清除左右兩側(cè)浮動(dòng)的影響。【例6.2】清除浮動(dòng)案例，HTML文檔由一個(gè)

<div>和兩個(gè)

<p>標(biāo)記組成，在

div中插入一張圖片，并設(shè)置其左浮動(dòng)，其代碼如下：運(yùn)行效果如圖6-6所示，由于

div設(shè)置了左浮動(dòng)，因此，段落標(biāo)記會(huì)圍繞圖片顯示。圖6-6清除浮動(dòng)前的效果如果想讓段落文本不受浮動(dòng)的影響，則需要通過(guò)清除浮動(dòng)實(shí)現(xiàn)，為<p>標(biāo)記添加樣式代碼：p{clear:left;}保存文本后，刷新頁(yè)面，效果如圖6-7所示。圖6-7清除浮動(dòng)后的效果通過(guò)圖6-7可以看出，清除段落文本左側(cè)浮動(dòng)后，段落文本不再受到浮動(dòng)元素的影響，而是按照元素自身的默認(rèn)排列方式，獨(dú)自占據(jù)一個(gè)區(qū)域，顯示在圖片下方。需要注意的是，clear屬性只能清除元素左右兩側(cè)浮動(dòng)的影響，然而在制作網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)遇到一些特殊的浮動(dòng)影響，例如，對(duì)元素設(shè)置浮動(dòng)時(shí)，如果不對(duì)其父元素定義高度，則子元素的浮動(dòng)會(huì)對(duì)父元素產(chǎn)生影響。【例6.3】子元素浮動(dòng)對(duì)父元素的影響，一個(gè)父盒子中包含三個(gè)子盒子，為三個(gè)子盒子定義左浮動(dòng)，其代碼如下：運(yùn)行效果如圖6-8所示，由于受到子元素浮動(dòng)的影響，沒(méi)有設(shè)置高度的父元素變成了一條線，即父元素不能自適應(yīng)子元素的高度。圖6-8浮動(dòng)對(duì)父元素的影響我們知道父元素和子元素為嵌套關(guān)系，不存在左右位置，所以使用clear屬性并不能清除子元素浮動(dòng)對(duì)父元素的影響，那么對(duì)于這種情況該如何清除浮動(dòng)呢？為了使讀者在以后的工作中能夠輕松地清除一些特殊的浮動(dòng)影響，下面介紹常用的3種清除浮動(dòng)的方式。6.2.1使用空標(biāo)記清除浮動(dòng)在浮動(dòng)元素之后添加空標(biāo)記，并對(duì)該標(biāo)記應(yīng)用“clear:both;”樣式，可清除浮動(dòng)所產(chǎn)生的影響。6.2.1使用空標(biāo)記清除浮動(dòng)【例6.4】使用空標(biāo)記清除浮動(dòng)，在浮動(dòng)元素

div1、div2、div3之后添加

class為

four

的空

<div>標(biāo)記，然后對(duì)其應(yīng)用“clear:both;”的樣式，其代碼如下：6.2.1使用空標(biāo)記清除浮動(dòng)運(yùn)行效果如圖6-9所示，父元素被子元素?fù)伍_(kāi)了，即子元素的浮動(dòng)對(duì)父元素的影響已經(jīng)不存在了。這種方法的不足之處在于增加了不必要的結(jié)構(gòu)元素。圖6-9空標(biāo)記清除浮動(dòng)6.2.2使用

overflow清除浮動(dòng)給浮動(dòng)元素的父元素添加“overflow:hidden;”或“overflow:auto;”樣式可清除浮動(dòng)，該方法彌補(bǔ)了空標(biāo)記清除浮動(dòng)的不足。6.2.2使用

overflow清除浮動(dòng)【例6.5】使用

overflow清除浮動(dòng)，對(duì)父元素應(yīng)用“overflow:hidden;”樣式清除浮動(dòng)，其代碼如下：6.2.2使用

overflow清除浮動(dòng)運(yùn)行效果如圖6-10所示，父元素被子元素?fù)伍_(kāi)，達(dá)到預(yù)期的效果。圖6-10使用

overflow清除浮動(dòng)6.2.3使用

after偽元素清除浮動(dòng)使用

after偽元素清除浮動(dòng)實(shí)現(xiàn)原理類似于添加空標(biāo)記清除浮動(dòng)的方法，只是區(qū)別在于前者是在結(jié)構(gòu)中插入一個(gè)空標(biāo)記，而后者是利用偽類：after在元素內(nèi)部增加一個(gè)類似于空標(biāo)記的效果。使用

after偽元素清除浮動(dòng)時(shí)需要注意以下兩點(diǎn)：（1）必須為需要清除浮動(dòng)的元素偽對(duì)象設(shè)置“height:0;”樣式，否則該元素會(huì)比其實(shí)際高度高出若干像素。（2）必須在偽元素中設(shè)置

content屬性，屬性值可以為空，如“content:"";”6.2.3使用

after偽元素清除浮動(dòng)【例6.6】使用偽元素清除浮動(dòng)，先定義偽元素樣式，在需要清除浮動(dòng)的父元素上應(yīng)用該樣式，其代碼如下：6.2.3使用

after偽元素清除浮動(dòng)運(yùn)行效果如圖6-11，同樣父元素被子元素?fù)伍_(kāi)，同時(shí)達(dá)到預(yù)期的效果。圖6-11使用偽元素清除浮動(dòng)第三節(jié)PART.03元素的定位浮動(dòng)布局雖然靈活，但是卻無(wú)法對(duì)元素的位置進(jìn)行精確的控制。在CSS中，通過(guò)

position可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的精確定位。定位的基本思想很簡(jiǎn)單，一般可以定義元素相對(duì)于其在文檔流中的位置定位，或者相對(duì)于父元素、另一個(gè)元素甚至是瀏覽器窗口的位置進(jìn)行定位。6.3.1元素定位的屬性元素定位的屬性主要包括定位模式和邊偏移兩部分，具體介紹如下：6.3.1元素定位的屬性1.定位模式在

CSS中，position屬性用于定義元素的定位模式，其基本語(yǔ)法格式如下：選擇器{position:屬性值;}position屬性的常用值見(jiàn)表6-1。屬性值含義static靜態(tài)定位（默認(rèn)方式）relative相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位absolute絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的祖先元素進(jìn)行定位fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位表6-1position屬性的常用值6.3.1元素定位的屬性2.邊偏移定位模式僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在

CSS中，通過(guò)邊偏移

top、bottom、left或

right，來(lái)精確定位元素的位置，邊偏移屬性的取值為不同單位的數(shù)值或百分比。邊偏移的設(shè)置方式見(jiàn)表6-2。屬性值含義top頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離bottom底部偏移量，定義元素相對(duì)于其父元素下邊線的距離left頂端偏移量，定義元素相對(duì)于其父元素左邊線的距離right頂端偏移量，定義元素相對(duì)于其父元素右邊線的距離表6-2邊偏移的設(shè)置方式6.3.2靜態(tài)定位當(dāng)用于定位的元素其

position屬性為

static時(shí)，稱此定位模式為靜態(tài)定位，元素所在的位置也就是文檔流中的位置。任何元素在默認(rèn)狀態(tài)下都會(huì)以靜態(tài)定位來(lái)確定自己的位置，所以當(dāng)沒(méi)有定義

position

屬性時(shí)，并不是說(shuō)該元素沒(méi)有自己的位置，它會(huì)遵循默認(rèn)值顯示靜態(tài)位置。在靜態(tài)定位狀態(tài)下，邊偏移屬性（top、bottom、left、right）不適用。6.3.3相對(duì)定位當(dāng)用于定位的元素的

position屬性取值為

relative時(shí)，稱此定位模式為相對(duì)定位，如果對(duì)某一個(gè)元素進(jìn)行相對(duì)定位，則可以通過(guò)設(shè)置其邊偏移屬性，將這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。但元素仍然保持其未定位前的形狀，它原本所占的空間也繼續(xù)保留。6.3.3相對(duì)定位【例6.7】對(duì)

div1設(shè)置相對(duì)定位模式，并通過(guò)邊偏移屬性

left和top改變它的位置，其代碼如下：6.3.3相對(duì)定位運(yùn)行效果如圖6-12所示，可以看出，對(duì)

div1設(shè)置相對(duì)定位后，它會(huì)相對(duì)于自身的默認(rèn)位置進(jìn)行偏移，但是它在文檔流中的位置仍然保留。圖6-12相對(duì)定位的應(yīng)用6.3.4絕對(duì)定位當(dāng)用于定位的元素的

position屬性取值為

absolute時(shí)，稱此定位模式為絕對(duì)定位，絕對(duì)定位將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、相對(duì)、固定定位）的父元素進(jìn)行定位，若其所有的父元素都沒(méi)有定位，則依據(jù)body元素（瀏覽器窗口）進(jìn)行定位。6.3.4絕對(duì)定位【例6.8】對(duì)父盒子設(shè)置相對(duì)定位模式，對(duì)

div1盒子設(shè)置絕對(duì)定位模式，并通過(guò)邊偏移屬性

left和

top改變它的位置，代碼如下：6.3.4絕對(duì)定位運(yùn)行效果如圖6-13所示，在圖6-13中，設(shè)置為定位的元素依據(jù)其父盒子進(jìn)行絕對(duì)定位，并且，這時(shí)

div2盒子占據(jù)了

div1的位置，即

div1脫離標(biāo)準(zhǔn)文檔流的控制，不再占據(jù)標(biāo)準(zhǔn)文檔流中的空間，此時(shí)，無(wú)論如何拖動(dòng)瀏覽器窗口，div1相對(duì)于父盒子的位置都不會(huì)發(fā)生變化。圖6-13絕對(duì)定位效果16.3.4絕對(duì)定位如果父盒子未進(jìn)行定位，則

div1相對(duì)瀏覽器定位，刪除代碼中父元素的樣式：“position:relative;left:0;top:0;”，效果如圖6-14所示。圖6-14絕對(duì)定位效果26.3.5固定定位當(dāng)用于定位的元素的

position屬性取值為

fixed時(shí)，稱此定位模式為固定定位，固定定位的元素特性如下：（1）固定定位是相對(duì)于“當(dāng)前瀏覽器窗口”來(lái)進(jìn)行定位。（2）固定定位元素不再占空間，層級(jí)要高于普通元素，與“浮動(dòng)”很像。（3）固定定位元素，是一個(gè)“塊元素”，換句話說(shuō)，行內(nèi)元素使用fixed定位，將轉(zhuǎn)換為“塊元素”。（4）如果只指定了

fixed定位屬性，并沒(méi)有設(shè)置偏移量，則是“原地不動(dòng)”。6.3.5固定定位【例6.9】設(shè)置二維碼圖片固定定位，其代碼如下：6.3.5固定定位運(yùn)行效果如圖6-15所示，二維碼圖片相對(duì)瀏覽器窗口進(jìn)行定位，固定到窗口右側(cè)。圖6-15固定定位應(yīng)用6.3.6z-index層疊級(jí)別z-index屬性決定一個(gè)

HTML元素的層疊級(jí)別。當(dāng)一個(gè)頁(yè)面有多個(gè)層的時(shí)候，就需要設(shè)置這些層的層疊順序，這樣才不會(huì)將頁(yè)面中需要顯示的內(nèi)容遮擋住。6.3.6z-index層疊級(jí)別現(xiàn)在來(lái)看層的概念。有兩張透明的塑料板疊加在一起，在上面一張塑料板上用彩筆畫一個(gè)直角三角形，在下面一張塑料板上用彩筆畫一個(gè)圓形，兩張塑料板疊加后的側(cè)視圖就如圖6-16的左圖一樣，頂視圖則會(huì)如圖6-16的右圖一樣。網(wǎng)頁(yè)中也有層的概念，網(wǎng)頁(yè)中每個(gè)層都好比是這里的塑料板，而呈現(xiàn)到顯示器上顯示出來(lái)的永遠(yuǎn)都是“頂視圖”效果。圖6-16層概念圖示6.3.6z-index層疊級(jí)別【例6.10】使用兩個(gè)

<div>標(biāo)簽，分別設(shè)置寬高和背景顏色，不設(shè)置疊放層次屬性，其代碼如下：6.3.6z-index層疊級(jí)別運(yùn)行效果如圖6-17所示。圖6-17未設(shè)置z-index屬性的顯示效果6.3.6z-index層疊級(jí)別現(xiàn)在修改代碼，設(shè)置兩個(gè)盒子的定位屬性，其代碼如下：6.3.6z-index層疊級(jí)別運(yùn)行效果如圖6-18所示，兩個(gè)定位

div元素產(chǎn)生重疊，div2位于上方。圖6-18層疊效果16.3.6z-index層疊級(jí)別元素層疊級(jí)別是相對(duì)于元素在

Z軸上的位置而言，一個(gè)更高的

z-index