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

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

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

絕對定位

固定定位13/30網(wǎng)頁中浮動的應用橫向導航菜單商品列表浮動——float屬性浮動的方式取值說明

float:left向左邊浮動

float:right向右邊浮動

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

靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是后。多個塊一起浮動，如果外層塊縮小，使得同行浮動塊空間不足時，浮動塊會依次向下一行移動。行內元素浮動后會強制轉換成塊級元素。此時要注意，一些內聯(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塊里的內容被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布局這樣設計：做一個父容器div，其他塊都在父容器中，并且讓父容器居中。header塊不浮動，left塊向左浮動，right塊向右浮動，footer塊不浮動。但是……浮動元素對后面元素的影響分析原因：

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

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

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

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

clear屬性能做到這一點。

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

清除浮動對元素造成的影響clear:left清除左浮動對元素造成的影響clear:right清除右浮動對元素造成的影響清理浮動的方法清除屬性-clear清除屬性：指定一個元素是否允許有元素漂浮在它的旁邊。或者這樣說：清除前面浮動元素對自己的影響。注意：這個規(guī)則只會影響使用清除的元素本身，不會影響其他元素。浮動元素對后面元素的影響由于left塊是左浮動，所以設置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ù)內容自動調節(jié)高度，而整個布局卻不會錯亂。內容溢出處理overflow屬性屬性值說明visible默認值。內容不會被修剪，會呈現(xiàn)在盒子之外hidden內容會被修剪，并且其余內容是不可見的scroll內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容auto如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容清除浮動的另外兩種方法-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;

}

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