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

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

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

絕對定位

固定定位13/30網(wǎng)頁中浮動的應(yīng)用橫向?qū)Ш讲藛紊唐妨斜砀印猣loat屬性浮動的方式取值說明

float:left向左邊浮動

float:right向右邊浮動

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

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

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

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

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

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

2、因此，footer塊之所以看不見，是因為它處在header塊下方，被left塊和right塊覆蓋了。所以footer塊里的內(nèi)容被擠到了下面。

3、如果我們將父容器的邊框顯示出來，還會看到父容器的高度并沒有被left塊和right塊撐開，父容器的高度塌陷了。

因此，我們希望不浮動的塊（footer塊）不要受到浮動塊的影響。而父容器的高度也不能因為子塊浮動而塌陷。

clear屬性能做到這一點。

footer塊在這里。父容器的高度在這。清理浮動（clear）取值說明clear:both

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

clear:left;

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

clear:both;

就可以了。

增加空盒子消除浮動元素對后面元素的影響增加空盒子的解決辦法：

在浮動元素的最后加一個空盒子，并賦予清除屬性：

.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布局完成。

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

left和right塊的高度是不固定的，它們可以根據(jù)內(nèi)容自動調(diào)節(jié)高度，而整個布局卻不會錯亂。內(nèi)容溢出處理overflow屬性屬性值說明visible默認值。內(nèi)容不會被修剪，會呈現(xiàn)在盒子之外hidden內(nèi)容會被修剪，并且其余內(nèi)容是不可見的scroll內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內(nèi)容auto如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容清除浮動的另外兩種方法-1給父級元素定義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)點是：不用添加額外的清除浮動標簽。清除浮動的另外兩種方法-2給父級元素使用:after偽類。

#main:after{

clear:both;

content:".";

display:block;

height:0;

visibility:hidden;

}

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