任務(wù)10

首頁(yè)導(dǎo)航欄板塊的設(shè)計(jì)與制作任務(wù)本任務(wù)使用浮動(dòng)布局完成“學(xué)習(xí)黨的二十大精神專(zhuān)題網(wǎng)”首頁(yè)導(dǎo)航欄效果，要求熟練掌握浮動(dòng)屬性的使用，以及清除浮動(dòng)影響的方法。網(wǎng)頁(yè)效果如圖所示。任務(wù)10首頁(yè)導(dǎo)航欄板塊的設(shè)計(jì)與制作首頁(yè)導(dǎo)航欄板塊效果任務(wù)10首頁(yè)導(dǎo)航欄板塊的設(shè)計(jì)與制作知識(shí)目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)（1）掌握浮動(dòng)布局的特性。（2）掌握浮動(dòng)屬性及其含義。（3）掌握清除浮動(dòng)影響的方法。（1）能夠使用浮動(dòng)屬性進(jìn)行頁(yè)面布局。（2）能夠靈活運(yùn)用清除浮動(dòng)屬性。（1）提升邏輯思維能力及實(shí)踐能力。（2）培養(yǎng)分析和解決問(wèn)題的能力。（3）培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)作意識(shí)。浮動(dòng)布局清除浮動(dòng)任務(wù)實(shí)現(xiàn)任務(wù)10首頁(yè)導(dǎo)航欄板塊的設(shè)計(jì)與制作1.浮動(dòng)布局1.1網(wǎng)頁(yè)布局方式1.2浮動(dòng)屬性float1.3浮動(dòng)布局的特性任務(wù)10首頁(yè)導(dǎo)航欄板塊的設(shè)計(jì)與制作1.1網(wǎng)頁(yè)布局方式

在制作網(wǎng)頁(yè)的過(guò)程中，有一個(gè)重要的環(huán)節(jié)就是網(wǎng)頁(yè)的布局方式，即HTML元素如何進(jìn)行排列順序。CSS中默認(rèn)的布局方式是普通流布局，也稱(chēng)之為標(biāo)準(zhǔn)流布局，也是最基本的布局方式。所謂的標(biāo)準(zhǔn)流就是指元素按默認(rèn)方式排列。包括以下特點(diǎn)：

（1）塊狀元素獨(dú)占一行，可以設(shè)置寬度和高度，在沒(méi)有設(shè)置大小的情況下塊元素寬度撐滿(mǎn)父元素、高度由內(nèi)容大小決定。默認(rèn)的排列方式是按照在HTML里的順序從上到下排列，而垂直方向相鄰?fù)膺吘鄷?huì)合并。（2）行內(nèi)元素的寬度和高度與內(nèi)容一致，不可以設(shè)置寬度和高度。默認(rèn)從左到右順序排列，當(dāng)碰到父元素邊緣時(shí)則自動(dòng)換行到下一行。1.浮動(dòng)布局1.1網(wǎng)頁(yè)布局方式1.浮動(dòng)布局【注意】1.有些網(wǎng)頁(yè)布局標(biāo)準(zhǔn)流不能實(shí)現(xiàn)，可以利用浮動(dòng)來(lái)實(shí)現(xiàn)，因?yàn)楦?dòng)可以改變標(biāo)簽元素默認(rèn)的排列方式。2.浮動(dòng)布局的主要用法是為了讓塊狀元素在一行中顯示（列級(jí)布局），或者讓文字在圖片的周?chē)@示。1.2浮動(dòng)屬性float1.浮動(dòng)布局在CSS中，浮動(dòng)布局是通過(guò)float屬性來(lái)實(shí)現(xiàn)的。float屬性定義元素向哪個(gè)方向浮動(dòng)。應(yīng)用了浮動(dòng)后元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到器父元素中指定的位置。語(yǔ)法格式如下：float:left|right|none;屬性值的含義如表所示：值描述left元素向左浮動(dòng)right元素向右浮動(dòng)none默認(rèn)值，元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置float的屬性值及其含義1.3浮動(dòng)布局的特性1.浮動(dòng)布局

任何元素都可以設(shè)置浮動(dòng)，當(dāng)元素設(shè)置了浮動(dòng)時(shí)，它會(huì)按指定方向向左或向右移動(dòng)，直到它的外邊緣碰到父元素包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。元素浮?dòng)后具有以下特性：（1）脫離標(biāo)準(zhǔn)流元素浮動(dòng)后成為浮動(dòng)框，會(huì)脫離標(biāo)準(zhǔn)流的控制，移動(dòng)到指定位置。這個(gè)浮動(dòng)框不再占據(jù)原來(lái)所占據(jù)的位置。塊狀元素浮動(dòng)后不再獨(dú)占一行，行內(nèi)元素浮動(dòng)后變成一個(gè)塊狀元素，可以指定寬高。（2）浮動(dòng)元素會(huì)影響后面的元素浮動(dòng)元素會(huì)影響在處于它后面的標(biāo)準(zhǔn)流元素，不會(huì)影響前面的標(biāo)準(zhǔn)流元素。包括元素的背景、邊框、內(nèi)邊距、外邊距，唯獨(dú)內(nèi)容不會(huì)受影響。1.3浮動(dòng)布局的特性1.浮動(dòng)布局

任何元素都可以設(shè)置浮動(dòng)，當(dāng)元素設(shè)置了浮動(dòng)時(shí)，它會(huì)按指定方向向左或向右移動(dòng)，直到它的外邊緣碰到父元素包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。元素浮?dòng)后具有以下特性：（1）脫離標(biāo)準(zhǔn)流元素浮動(dòng)后成為浮動(dòng)框，會(huì)脫離標(biāo)準(zhǔn)流的控制，移動(dòng)到指定位置。這個(gè)浮動(dòng)框不再占據(jù)原來(lái)所占據(jù)的位置。塊狀元素浮動(dòng)后不再獨(dú)占一行，行內(nèi)元素浮動(dòng)后變成一個(gè)塊狀元素，可以指定寬高。（2）浮動(dòng)元素會(huì)影響后面的元素浮動(dòng)元素會(huì)影響在處于它后面的標(biāo)準(zhǔn)流元素，不會(huì)影響前面的標(biāo)準(zhǔn)流元素。包括元素的背景、邊框、內(nèi)邊距、外邊距，唯獨(dú)內(nèi)容不會(huì)受影響。1.3浮動(dòng)布局的特性1.浮動(dòng)布局（3）浮動(dòng)元素具有行內(nèi)塊元素的特性任何元素添加浮動(dòng)后都具有行內(nèi)塊元素相似的特性。浮動(dòng)框可以設(shè)置寬度和高度，在沒(méi)有設(shè)置寬度和高度時(shí)它的大小由內(nèi)容決定。當(dāng)相鄰的元素都設(shè)置浮動(dòng)時(shí)，它們會(huì)按照指定的屬性值浮動(dòng)到一行內(nèi)顯示并且頂端對(duì)齊排列。1.3浮動(dòng)布局的特性1.浮動(dòng)布局行內(nèi)塊元素與float浮動(dòng)元素的比較如表所示。行內(nèi)塊元素與float浮動(dòng)元素的比較行內(nèi)塊元素float浮動(dòng)元素實(shí)現(xiàn)行內(nèi)塊元素在一行顯示實(shí)現(xiàn)塊元素在一行顯示代碼換行被解析成一個(gè)空格代碼換行不會(huì)被解析了空格不設(shè)置寬度的時(shí)候?qū)挾扔蓛?nèi)容大小決定不設(shè)置寬度的時(shí)候?qū)挾扔蓛?nèi)容大小決定在原標(biāo)準(zhǔn)流中，占有標(biāo)準(zhǔn)流的位置脫離標(biāo)準(zhǔn)流，不再占原標(biāo)準(zhǔn)流的位置浮動(dòng)布局清除浮動(dòng)任務(wù)實(shí)現(xiàn)任務(wù)10首頁(yè)導(dǎo)航欄板塊的設(shè)計(jì)與制作2.清除浮動(dòng)任務(wù)10首頁(yè)導(dǎo)航欄板塊的設(shè)計(jì)與制作2.1clear屬性2.2清除浮動(dòng)影響的常用方法2.1clear屬性在CSS中，清除浮動(dòng)屬性clear定義了元素的哪一側(cè)不允許出現(xiàn)浮動(dòng)元素。語(yǔ)法格式如下：2.清除浮動(dòng)

clear:none|left|right|both;屬性值的含義如表所示：clear的屬性值及其含義值含義none

默認(rèn)值，允許元素兩側(cè)都有浮動(dòng)元素left元素的左側(cè)不允許有浮動(dòng)元素right元素的右側(cè)不允許有浮動(dòng)元素both元素的左右兩邊都不允許有浮動(dòng)元素2.1clear屬性使用clear屬性的最常見(jiàn)用法是在元素上使用了float屬性之后。在清除浮動(dòng)時(shí)，應(yīng)該對(duì)清除與浮動(dòng)進(jìn)行匹配，如果某個(gè)元素浮動(dòng)到左側(cè)，則應(yīng)清除左側(cè)。浮動(dòng)元素會(huì)繼續(xù)浮動(dòng)，但是被清除的元素將顯示在其下方。在實(shí)際開(kāi)發(fā)過(guò)程中，幾乎都是使用值both。2.清除浮動(dòng)2.2清除浮動(dòng)影響的常用方法2.清除浮動(dòng)

清除浮動(dòng)主要是為了解決父元素因?yàn)樽釉馗?dòng)引起的內(nèi)部高度為0的問(wèn)題。清除浮動(dòng)影響常用的方法有以下四種：（1）設(shè)置父元素高度優(yōu)點(diǎn)：代碼簡(jiǎn)單，瀏覽器支持情況好。缺點(diǎn)：高度固定的情況下，當(dāng)元素的內(nèi)容增多到一定程度會(huì)產(chǎn)生溢出現(xiàn)象。該方法適合初學(xué)者。2.2清除浮動(dòng)影響的常用方法2.清除浮動(dòng)

（2）額外標(biāo)簽法

額外標(biāo)簽法是在浮動(dòng)元素的后面（父元素的結(jié)尾處）加入一個(gè)額外的標(biāo)簽，利用這個(gè)空元素專(zhuān)門(mén)用來(lái)清除浮動(dòng)影響，讓父元素可以自動(dòng)獲取高度。本質(zhì)就是閉合浮動(dòng)，讓父盒子閉合出口和入口，不讓子盒子出來(lái)，也稱(chēng)為隔離法。

【注意】此方法要求額外添加的標(biāo)簽必須是塊元素，行元素是無(wú)效，通常是空標(biāo)簽。優(yōu)點(diǎn)：代碼簡(jiǎn)單，通俗易懂，書(shū)寫(xiě)方便，瀏覽器支持情況好。缺點(diǎn)：當(dāng)網(wǎng)站中各頁(yè)面多處要清除浮動(dòng)影響時(shí)，添加空div越來(lái)越多，添加了很多無(wú)意義的標(biāo)簽，導(dǎo)致代碼冗余，結(jié)構(gòu)化較差。該方法在老版瀏覽器時(shí)期使用得比較多。2.2清除浮動(dòng)影響的常用方法2.清除浮動(dòng)

（3）after偽元素法after偽元素法是額外標(biāo)簽法的升級(jí)版，不需要添加額外的標(biāo)簽，而是使用父元素的after偽元素并添加clear:both。如下所示：

這個(gè)方法是目前清除浮動(dòng)影響的最常用方法，優(yōu)點(diǎn)在于代碼中不會(huì)出現(xiàn)冗余的代碼，便于以后代碼的維護(hù)，并且復(fù)用性高。但是該方法不支持低版本的瀏覽器。.clr:after{content:"這是專(zhuān)門(mén)用來(lái)清除浮動(dòng)的影響";display:block;clear:both;height:0px;overflow:hidden;visibility:hidden;}.clr:after{content:"這是專(zhuān)門(mén)用來(lái)清除浮動(dòng)的影響";display:block;clear:bot