第5章本章繼續(xù)向讀者介紹，在實(shí)際工作中使用頻率非常的三類知識，即浮動、定位與列表。通過本章的學(xué)習(xí)，讀者基本能夠達(dá)到創(chuàng)建并控制較為復(fù)雜的網(wǎng)頁版面。浮動、定位與列表5.1浮動與清除浮動5.1.1浮動（float）1．向左浮動或向右浮動

“float:left;”即是向左浮動，“float:right;”即是向右浮動。當(dāng)某個元素具有向左（右）浮動的屬性時，該元素就會生成一個塊級框，然后脫離當(dāng)前文檔流向左（右）移動，直到碰到左（右）邊緣。5.1浮動與清除浮動5.1浮動與清除浮動此處由于div是塊級元素，在初始狀態(tài)下，多個div容器會縱向排列，并且將父級容器wrap的高度撐開box-1脫離文本流后，向右移動，碰到父級元素的邊框，便停了下來。由于box-1移動，box-2便占據(jù)box-1的位置由于“box-2”不再處于文檔流中，所以它不占據(jù)空間，實(shí)際上覆蓋了“box-3”，致使“box-3”從視圖中消失子元素全部脫離文檔流進(jìn)行浮動，致使父級容器wrap沒有內(nèi)容將其撐開

圖5-1各容器初始狀態(tài)

圖5-2“box-1”浮動效果圖5-3“box-2”浮動效果

圖5-4三個容器均向左浮動效果5.1浮動與清除浮動2．浮動時由于容器空間不夠造成的錯位

圖5-5父級容器寬度不夠的情況

圖5-6浮動的容器相互擁擠的情況5.1浮動與清除浮動5.1.2清除浮動的三種方法1．方法一：額外增加應(yīng)用“clear:both;”規(guī)則的空容器在浮動元素后額外增加一個空容器，比如“<divclass="clear"></div>”，然后在CSS中賦予.clear{clear:both;}屬性即可清理浮動。2．方法二：使用“overflow:hidden;”規(guī)則清除浮動向浮動容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮動，在添加overflow屬性后，浮動的容器又回到了容器層，把容器高度撐起，達(dá)到了清理浮動的效果。3．方法三：使用:after偽元素清除浮動:after偽元素能夠在被選元素的內(nèi)容后面插入另一內(nèi)容。在實(shí)際執(zhí)行時，首先給浮動的容器添加一個名為“clearfix”的Class，然后給這個Class添加一個:after偽元素實(shí)現(xiàn)在容器末尾添加一個看不見的容器以清理浮動。5.2CSS定位CSS有關(guān)定位的屬性包括position、z-index（層疊順序）、top、left、right、bottom和clip。表5-1position屬性的取值及其含義取

值含

義staticposition屬性的默認(rèn)值，無特殊定位fixed固定，元素框的表現(xiàn)類似于將position設(shè)置為absolute，元素被固定在屏幕的某個位置，不隨滾動條滾動relative相對，元素雖然偏移某個距離，但仍然占據(jù)原來的空間absolute絕對，元素在文檔中的位置會被刪除，定位后元素生成一個塊級元素5.2.1靜態(tài)定位和固定定位1．靜態(tài)定位（static）2．固定定位（fixed）圖5-10鼠標(biāo)為滾動時左側(cè)導(dǎo)航固定

圖5-11頁面滾動后左側(cè)導(dǎo)航仍然固定5.2CSS定位5.2.2相對和絕對定位1.相對定位（relative）圖5-12沒有添加相對定位樣式的初始預(yù)覽效果

圖5-13“content”容器添加相對定位樣式的預(yù)覽效果5.2CSS定位2．絕對定位（absolute）3．層疊（z-index）

5.2CSS定位圖5-14“box-1”容器添加絕對定位樣式的預(yù)覽效果

圖5-15“box-1”容器添加z-index樣式的預(yù)覽效果5.2.3相對于某一容器的絕對定位5.2CSS定位本例中通過設(shè)置父級容器相對定位，子級容器絕對定位，實(shí)現(xiàn)了“特賣圖標(biāo)放置在左上角的效果”圖5-17“相對于某一容器的絕對定位”預(yù)覽效果5.3.1有關(guān)列表的CSS樣式5.3列表

在CSS樣式中，主要是通過list-style-image屬性、list-style-position屬性和list-style-type屬性這3個屬性改變列表修飾符的類型。表5-2有關(guān)列表的CSS樣式屬性屬

性說

明list-style復(fù)合屬性，用于把所有用于列表的屬性設(shè)置于一個聲明中。list-style-image將圖象設(shè)置為列表項標(biāo)志。list-style-position設(shè)置列表項標(biāo)記如何根據(jù)文本排列。list-style-type設(shè)置列表項標(biāo)志的類型。marker-offset設(shè)置標(biāo)記容器和主容器之間水平補(bǔ)白。5.3.2仿“天貓”首頁的縱向?qū)Ш?.3列表導(dǎo)航的標(biāo)題個性化的圖標(biāo)由無序列表盛放的導(dǎo)航內(nèi)容圖5-19仿“天貓”首頁的縱向?qū)Ш筋A(yù)覽效果5.3.3仿“鳳凰網(wǎng)”首頁的橫向?qū)Ш?.3列表圖5-25仿“鳳凰網(wǎng)”首頁的橫向?qū)Ш?.4仿“天貓電器城（手機(jī)館）”的圖文信息列表

圖5-29包含圖文信息列表的板塊

圖5-30粗略的板塊布局示意圖5.4仿“天貓電器城（手機(jī)館）”的圖文信息列表圖5-31“floor-hd