《網(wǎng)頁(yè)設(shè)計(jì)》課件-11 CSS浮動(dòng)布局

CSS浮動(dòng)布局重難點(diǎn)分析APARTONE重點(diǎn)：1、浮動(dòng)布局2、消除浮動(dòng)影響難點(diǎn)：1、浮動(dòng)布局2、消除浮動(dòng)影響課程講解BPARTTWO常見(jiàn)網(wǎng)頁(yè)布局這是常見(jiàn)的1-2-1布局。上部：導(dǎo)航部分；中部：主體部分；下部：版權(quán)部分；每一塊都是一個(gè)div常見(jiàn)網(wǎng)頁(yè)布局這是常見(jiàn)的1-3-1布局。上部：導(dǎo)航部分；中部：主體部分；下部：版權(quán)部分；每一塊都是一個(gè)div為什么要采用DIV+CSS布局方式使用“DIV+CSS”對(duì)網(wǎng)站進(jìn)行布局符合W3C標(biāo)準(zhǔn)。使用傳統(tǒng)的表格布局有很多缺點(diǎn)，比如垃圾代碼過(guò)多，語(yǔ)義性不強(qiáng)，對(duì)搜索引擎不友好等。通過(guò)使用div盒子模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊，然后用css來(lái)定義盒子模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。div用于搭建網(wǎng)站結(jié)構(gòu)（框架）、css用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）。該標(biāo)準(zhǔn)簡(jiǎn)化了HTML頁(yè)面代碼，獲得一個(gè)較優(yōu)秀的網(wǎng)站結(jié)構(gòu)，有利于日后網(wǎng)站維護(hù)、協(xié)同工作和便于搜索引擎抓取。當(dāng)然并不是所有的網(wǎng)頁(yè)都需要用div布局，例如數(shù)據(jù)頁(yè)面、報(bào)表之類的頁(yè)面，還是使用HTML的表格會(huì)比較方便，web

標(biāo)準(zhǔn)里并沒(méi)有說(shuō)要拋棄table。DIV+CSS布局方式DIV+CSS布局方式有三種：文檔流布局方式：依據(jù)文檔流，根據(jù)HTML元素的順序結(jié)構(gòu)布局（這是默認(rèn)的）。絕對(duì)定位布局方式：通過(guò)設(shè)置HTML元素的position屬性布局。浮動(dòng)布局方式：通過(guò)設(shè)置HTML元素的float屬性布局。文檔流布局方式使用文檔流布局完成下面這個(gè)1-1-1布局文檔流布局方式但是，使用文檔流布局能完成下面這個(gè)1-2-1布局嗎？文檔流布局方式塊級(jí)元素獨(dú)占一行，所以文檔流布局只能依次順序向下排列，不能進(jìn)行復(fù)雜布局。在實(shí)際應(yīng)用中，都采用浮動(dòng)布局或定位布局網(wǎng)頁(yè)元素的三種位置方式普通流浮動(dòng)定位相對(duì)定位

絕對(duì)定位

固定定位13/30網(wǎng)頁(yè)中浮動(dòng)的應(yīng)用橫向?qū)Ш讲藛紊唐妨斜砀?dòng)——float屬性浮動(dòng)的方式取值說(shuō)明

float:left向左邊浮動(dòng)

float:right向右邊浮動(dòng)

float:none不浮動(dòng)浮動(dòng)規(guī)則：浮動(dòng)的塊可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它區(qū)塊的邊框、或另一個(gè)浮動(dòng)框的邊框、或一個(gè)標(biāo)準(zhǔn)流塊的下一行。當(dāng)存在多個(gè)塊時(shí)，如果其中一個(gè)塊浮動(dòng)了，那么它就脫離了文檔流，那么其余的塊會(huì)依據(jù)文檔流向前移動(dòng)，也就是占據(jù)了浮動(dòng)塊的位置。如果多個(gè)塊一起浮動(dòng)，那么它們按照HTML代碼順序從前向后依次跟隨。

靠近頁(yè)面邊緣的一端是前，遠(yuǎn)離頁(yè)面邊緣的一端是后。多個(gè)塊一起浮動(dòng)，如果外層塊縮小，使得同行浮動(dòng)塊空間不足時(shí)，浮動(dòng)塊會(huì)依次向下一行移動(dòng)。行內(nèi)元素浮動(dòng)后會(huì)強(qiáng)制轉(zhuǎn)換成塊級(jí)元素。此時(shí)要注意，一些內(nèi)聯(lián)屬性將失效（比如：vertical-align）.浮動(dòng)規(guī)則-11、浮動(dòng)的塊可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它區(qū)塊的邊框、或另一個(gè)浮動(dòng)框的邊框、或一個(gè)標(biāo)準(zhǔn)流塊的下一行。#one{ float:left;……}#one{ float:right;……}浮動(dòng)規(guī)則-2-12、當(dāng)存在多個(gè)塊時(shí)，如果第一個(gè)塊浮動(dòng)了，那么它就脫離了文檔流，那么第二個(gè)塊會(huì)依據(jù)文檔流向前移動(dòng)，也就是占據(jù)了第一個(gè)塊的位置。A塊向左浮動(dòng)：B塊依據(jù)文檔流向前流動(dòng)，占據(jù)了A塊的位置，并且被A塊覆蓋了。注意：B塊里的內(nèi)容被A塊擠了出來(lái)。浮動(dòng)規(guī)則-2-22、當(dāng)存在多個(gè)塊時(shí)，如果第一個(gè)塊浮動(dòng)了，那么它就脫離了文檔流，那么第二個(gè)塊會(huì)依據(jù)文檔流向前移動(dòng)，也就是占據(jù)了第一個(gè)塊的位置。A塊向右浮動(dòng)：B塊依據(jù)文檔流向前流動(dòng)，占據(jù)了A塊的位置。浮動(dòng)規(guī)則-2-32、當(dāng)存在多個(gè)塊時(shí)，如果第一個(gè)塊浮動(dòng)了，那么它就脫離了文檔流，那么第二個(gè)塊會(huì)依據(jù)文檔流向前移動(dòng)，也就是占據(jù)了第一個(gè)塊的位置。B塊向左浮動(dòng)：由于A塊沒(méi)有浮動(dòng)，它依然處于文檔流中，獨(dú)占第一行。所以，雖然B塊向左浮動(dòng)，但B塊碰到了A塊，就被擋住了，不在向上移動(dòng)。浮動(dòng)規(guī)則-2-4ShenYangChinaSoftInternational沈陽(yáng)中軟國(guó)際

2、當(dāng)存在多個(gè)塊時(shí)，如果其中一個(gè)塊浮動(dòng)了，那么它就脫離了文檔流，那么其余的塊會(huì)依據(jù)文檔流向前移動(dòng)，也就是占據(jù)了浮動(dòng)塊的位置。B塊向右浮動(dòng)：由于A塊沒(méi)有浮動(dòng)，它依然處于文檔流中，獨(dú)占第一行。所以，雖然B塊向右浮動(dòng)，但B塊只能處在第二行的右邊。浮動(dòng)規(guī)則-3-13、如果多個(gè)塊一起浮動(dòng)，那么它們按照HTML代碼順序從前向后依次跟隨。

靠近頁(yè)面邊緣的一端是前，遠(yuǎn)離頁(yè)面邊緣的一端是后。A、B塊都向左浮動(dòng)：A塊向左浮動(dòng)，B塊依次跟隨向左浮動(dòng)。浮動(dòng)規(guī)則-3-23、如果多個(gè)塊一起浮動(dòng)，那么它們按照HTML代碼順序從前向后依次跟隨。

靠近頁(yè)面邊緣的一端是前，遠(yuǎn)離頁(yè)面邊緣的一端是后。A、B塊都向右浮動(dòng)：A塊向右浮動(dòng)，B塊依次跟隨向右浮動(dòng)。浮動(dòng)規(guī)則-4-14、多個(gè)塊一起浮動(dòng)，如果外層塊縮小，使得同行浮動(dòng)塊空間不足時(shí)，浮動(dòng)塊會(huì)依次向下一行移動(dòng)。浮動(dòng)規(guī)則-4-24、多個(gè)塊一起浮動(dòng)，如果外層塊縮小，使得同行浮動(dòng)塊空間不足時(shí)，浮動(dòng)塊會(huì)依次向下一行移動(dòng)。由于外層塊的縮小，當(dāng)浮動(dòng)塊向下一層移動(dòng)時(shí)，有可能會(huì)被卡住。使用浮動(dòng)完成1-2-1布局這樣設(shè)計(jì)：做一個(gè)父容器div，其他塊都在父容器中，并且讓父容器居中。header塊不浮動(dòng)，left塊向左浮動(dòng)，right塊向右浮動(dòng)，footer塊不浮動(dòng)。但是……浮動(dòng)元素對(duì)后面元素的影響分析原因：

1、當(dāng)left塊和right塊浮動(dòng)后，脫離了文檔流，所以footer塊向上占據(jù)left塊和right塊的位置。

2、因此，footer塊之所以看不見(jiàn)，是因?yàn)樗幵趆eader塊下方，被left塊和right塊覆蓋了。所以footer塊里的內(nèi)容被擠到了下面。

3、如果我們將父容器的邊框顯示出來(lái)，還會(huì)看到父容器的高度并沒(méi)有被left塊和right塊撐開(kāi)，父容器的高度塌陷了。

因此，我們希望不浮動(dòng)的塊（footer塊）不要受到浮動(dòng)塊的影響。而父容器的高度也不能因?yàn)樽訅K浮動(dòng)而塌陷。

clear屬性能做到這一點(diǎn)。

footer塊在這里。父容器的高度在這。清理浮動(dòng)（clear）取值說(shuō)明clear:both

清除浮動(dòng)對(duì)元素造成的影響clear:left清除左浮動(dòng)對(duì)元素造成的影響clear:right清除右浮動(dòng)對(duì)元素造成的影響清理浮動(dòng)的方法清除屬性-clear清除屬性：指定一個(gè)元素是否允許有元素漂浮在它的旁邊?；蛘哌@樣說(shuō)：清除前面浮動(dòng)元素對(duì)自己的影響。注意：這個(gè)規(guī)則只會(huì)影響使用清除的元素本身，不會(huì)影響其他元素。浮動(dòng)元素對(duì)后面元素的影響由于left塊是左浮動(dòng)，所以設(shè)置footer塊的左清除屬性：

clear:left;

如果使用右清除屬性，則沒(méi)有效果。實(shí)際上，我們的目的是讓footer塊處在left塊和right塊之下，所以不必理會(huì)左清除或右清除，使用

clear:both;

就可以了。

增加空盒子消除浮動(dòng)元素對(duì)后面元素的影響增加空盒子的解決辦法：

在浮動(dòng)元素的最后加一個(gè)空盒子，并賦予清除屬性：

.clear{

clear:both;

}

<divid=“container”>

<divid=“header”>header</div>

<divid=“l(fā)eft”>left</div>

<divid=“right”>right</div>

<divclass=“clear”></div>

<divid=“footer”>footer</div>

</div>

注意：這是W3C組織推薦做法。

1-2-1布局完成1-2-1布局完成。

在這個(gè)布局中，header和footer塊的高度固定。

left和right塊的高度是不固定的，它們可以根據(jù)內(nèi)容自動(dòng)調(diào)節(jié)高度，而整個(gè)布局卻不會(huì)錯(cuò)亂。內(nèi)容溢出處理overflow屬性屬性值說(shuō)明visible默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在盒子之外hidden內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容auto如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容清除浮動(dòng)的另外兩種方法-1給父級(jí)元素定義overflow:auto，或overflow:hidden。

#main{

width:200px;

overflow:auto;

}

<divid="container">

<divid="header">header</div>

<divid="main">

<divid="left">left</div>

<divid="right">right</div>

</div>

<divid="footer">footer</div>

</div>

這種方式的優(yōu)點(diǎn)是：不用添加額外的清除浮動(dòng)標(biāo)簽。清除浮動(dòng)的另外兩種方法-2給父級(jí)元素使用:after偽類。

#main:after{

clear:both;

content:".";

display:block;

height:0;

visibility:hidden;

}

這種方式類似于第一種。但是不用添加額外標(biāo)簽來(lái)設(shè)置clear:both屬性。而是利用:after偽類，給父容器中的最后元素設(shè)置clear:both屬性。35/30小結(jié)使用clear