CSS-浮動(dòng)布局

1、浮動(dòng)布局浮動(dòng)布局本章內(nèi)容本章內(nèi)容固定寬度網(wǎng)頁(yè)布局固定寬度網(wǎng)頁(yè)布局一一實(shí)現(xiàn)網(wǎng)頁(yè)布局的三種方式實(shí)現(xiàn)網(wǎng)頁(yè)布局的三種方式 二二浮動(dòng)的概念浮動(dòng)的概念 三三兩列浮動(dòng)布局兩列浮動(dòng)布局 四四三列浮動(dòng)布局三列浮動(dòng)布局 五五讓背景延伸讓背景延伸 六六固定寬度網(wǎng)頁(yè)布局固定寬度網(wǎng)頁(yè)布局一一760px 固定寬度，居左。固定寬度，居左。 #container width: 760px; 固定寬度，居中。固定寬度，居中。 #container width: 760px; margin: 0 auto; 760px760px 固定寬度，居右。固定寬度，居右。 #container width: 760px; margin:

2、0 0 0 auto; 固定寬度網(wǎng)頁(yè)布局固定寬度網(wǎng)頁(yè)布局v 居左居左#container width: 760px; v 居中居中#container width: 760px; margin: 0 auto; v 居右居右#container width: 760px; margin: 0 0 0 auto; 實(shí)現(xiàn)網(wǎng)頁(yè)布局的三種方式實(shí)現(xiàn)網(wǎng)頁(yè)布局的三種方式二二v 普通流普通流v 浮動(dòng)浮動(dòng)v 定位定位 相對(duì)定位相對(duì)定位 絕對(duì)定位絕對(duì)定位 固定定位固定定位實(shí)現(xiàn)網(wǎng)頁(yè)布局的三種方式實(shí)現(xiàn)網(wǎng)頁(yè)布局的三種方式浮動(dòng)的概念浮動(dòng)的概念 三三1. 浮動(dòng)（浮動(dòng)（float）v 浮動(dòng)的元素可以左右移動(dòng)，直到它的邊緣碰到

3、父元素的邊浮動(dòng)的元素可以左右移動(dòng)，直到它的邊緣碰到父元素的邊緣或另一個(gè)浮動(dòng)元素的邊緣。緣或另一個(gè)浮動(dòng)元素的邊緣。v 浮動(dòng)的方式浮動(dòng)的方式 取值取值 說(shuō)明說(shuō)明 float : left 浮動(dòng)在左邊浮動(dòng)在左邊 float : right 浮動(dòng)在右邊浮動(dòng)在右邊 float : none 不浮動(dòng)不浮動(dòng)浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 1#box1 float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 1#box1 float: left; margin: 0 10px;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 1#box1 float: left; margin: 0 10px;#box2 float: left; margin: 0 10px;浮動(dòng)實(shí)

4、驗(yàn)浮動(dòng)實(shí)驗(yàn) 1#box1 float: left; margin: 0 10px;#box2 float: left; margin: 0 10px;#box3 float: left; margin: 0 10px;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 1#box1 float: left; margin: 0 10px;#box2 float: left; margin: 0 10px;#box3 float: left; margin: 0 10px;實(shí)驗(yàn)實(shí)驗(yàn) 1 小結(jié)：小結(jié)：（1）不設(shè)置寬度時(shí)，）不設(shè)置寬度時(shí)，浮動(dòng)元素收縮至最小。浮動(dòng)元素收縮至最小。（2）塊狀元素忽略?。K狀元素忽略浮動(dòng)元素，文字環(huán)繞浮動(dòng)

5、元素，文字環(huán)繞浮動(dòng)元素。動(dòng)元素。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 1浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 2浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 2浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 2浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 2浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 2浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 2浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 2實(shí)驗(yàn)實(shí)驗(yàn) 2 小結(jié)：小結(jié)：當(dāng)空間不夠時(shí)，浮動(dòng)元素下移。當(dāng)空間不夠時(shí)，浮動(dòng)元素下移。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 3浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 3浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 3浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 3浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 3實(shí)驗(yàn)實(shí)驗(yàn) 3 小結(jié)：小結(jié)：當(dāng)空間不夠時(shí)，浮動(dòng)元素下移。當(dāng)空間不夠時(shí)，浮動(dòng)元素下移。浮動(dòng)元素浮動(dòng)元素下移時(shí)，可能被其它浮動(dòng)元素卡住。下移時(shí)，可能被其它浮動(dòng)元素卡住。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 4#box3 float: left;浮動(dòng)實(shí)驗(yàn)

6、浮動(dòng)實(shí)驗(yàn) 4#box3 float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 4#box3 float: right;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 4#box3 float: right;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 4實(shí)驗(yàn)實(shí)驗(yàn) 4 小結(jié)：小結(jié)：浮動(dòng)元素只對(duì)其后面浮動(dòng)元素只對(duì)其后面的元素產(chǎn)生影響。的元素產(chǎn)生影響。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 5#box2 width: 200px; height: 200px; float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 5#box2 width: 200px; height: 200px; float: left;#box3 height: 150px; margin-left: 220px;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)

7、驗(yàn) 5#box2 width: 200px; height: 200px; float: left;#box3 height: 150px; margin-left: 220px;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 5#box2 width: 200px; height: 200px; float: left;#box3 height: 150px; margin-left: 220px;#box4 clear: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 5#box2 width: 200px; height: 200px; float: left;#box3 height: 150px; margin-left: 220p

8、x;#box4 clear: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 5實(shí)驗(yàn)實(shí)驗(yàn) 5 小結(jié)：小結(jié)：（1）前面的元素浮動(dòng)，）前面的元素浮動(dòng)，后面的元素加后面的元素加 margin ，可以形成兩，可以形成兩列。列。（2）要用）要用 clear 清除清除浮動(dòng)元素對(duì)腳部元素浮動(dòng)元素對(duì)腳部元素產(chǎn)生的影響。產(chǎn)生的影響。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 6#box2 width: 200px; height: 200px; float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 6#box2 width: 200px; height: 200px; float: left;#box3 width: 400px; height: 150px; flo

9、at: right;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 6#box2 width: 200px; height: 200px; float: left;#box3 width: 400px; height: 150px; float: right;#box4 clear: both;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 6#box2 width: 200px; height: 200px; float: left;#box3 width: 400px; height: 150px; float: right;#box4 clear: both;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 6實(shí)驗(yàn)實(shí)驗(yàn) 6 小結(jié)：小結(jié)：（1）兩個(gè)元素同時(shí)?。﹥蓚€(gè)元素同時(shí)浮動(dòng)，可

10、以形成兩列。動(dòng)，可以形成兩列。（2）要用）要用 clear 清除清除浮動(dòng)元素對(duì)腳部元素浮動(dòng)元素對(duì)腳部元素產(chǎn)生的影響。產(chǎn)生的影響。2. 清理浮動(dòng)清理浮動(dòng)v 清理浮動(dòng)的方法清理浮動(dòng)的方法 取值取值 說(shuō)明說(shuō)明 clear : both 兩邊不允許有浮動(dòng)的對(duì)象兩邊不允許有浮動(dòng)的對(duì)象 clear : left 左邊不允許有浮動(dòng)的對(duì)象左邊不允許有浮動(dòng)的對(duì)象 clear : right 右邊不允許有浮動(dòng)的對(duì)象右邊不允許有浮動(dòng)的對(duì)象浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 7 #son float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 7#son float: left; 結(jié)論：父元素不能包含浮動(dòng)的子元素。結(jié)論：父元素不能包含浮動(dòng)的子元素。

11、浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 7#son float: left; .clear clear: both;結(jié)論：可以利用一個(gè)空元素清除浮動(dòng)，迫使父元素包含浮動(dòng)的子元素。結(jié)論：可以利用一個(gè)空元素清除浮動(dòng)，迫使父元素包含浮動(dòng)的子元素。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 7#son float: left; 結(jié)論：可以讓父元素同時(shí)浮動(dòng)，迫使父元素包含浮動(dòng)的子元素。結(jié)論：可以讓父元素同時(shí)浮動(dòng)，迫使父元素包含浮動(dòng)的子元素。#father float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 7#son float: left; 結(jié)論：可以設(shè)置父元素的結(jié)論：可以設(shè)置父元素的 overflow 屬性為屬性為 auto ，迫使父元素包含浮動(dòng)，迫使父元

12、素包含浮動(dòng) 的子元素。的子元素。#father overflow: auto;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 7實(shí)驗(yàn)實(shí)驗(yàn) 7 小結(jié)：小結(jié)：（1）父元素不能包含浮動(dòng)的子元）父元素不能包含浮動(dòng)的子元素。素。（2）迫使父元素包含子元素的方）迫使父元素包含子元素的方法有三種：法有三種： a. 用一個(gè)空元素清理浮動(dòng)；用一個(gè)空元素清理浮動(dòng)； b. 父元素同時(shí)浮動(dòng)。父元素同時(shí)浮動(dòng)。 c. 設(shè)置父元素的設(shè)置父元素的 overflow 屬性為屬性為 auto。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 8 #son float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 8 #son float: left;#father widht: 100%;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn)

13、 8實(shí)驗(yàn)實(shí)驗(yàn) 8 小結(jié)：小結(jié)：（1） IE6 對(duì)父元素與浮動(dòng)的子元對(duì)父元素與浮動(dòng)的子元素之間的關(guān)系進(jìn)行了錯(cuò)誤的解析。素之間的關(guān)系進(jìn)行了錯(cuò)誤的解析。（2）當(dāng)父元素未設(shè)置）當(dāng)父元素未設(shè)置 width 或或 height 時(shí)，父元素不包含浮動(dòng)的子時(shí)，父元素不包含浮動(dòng)的子元素。元素。（3）當(dāng)父元素設(shè)置）當(dāng)父元素設(shè)置 了了width 或或 height 時(shí)，父元素自動(dòng)包含浮動(dòng)的時(shí)，父元素自動(dòng)包含浮動(dòng)的子元素。子元素。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 9#son1 , #son2 width: 100px; height: 100px; margin: 50px 0;#father width: 150px; 垂直邊界重

14、疊垂直邊界重疊垂直邊界重疊垂直邊界重疊垂直邊界重疊垂直邊界重疊浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 9#son1 , #son2 width: 100px; height: 100px; margin: 50px 0; float: left;#father width: 150px;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 9#son1 , #son2 width: 100px; height: 100px; margin: 50px 0; float: left;#father width: 150px; overflow: auto;不與父邊界重疊不與父邊界重疊垂直邊界相加垂直邊界相加不與父邊界重疊不與父邊界重疊浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn)

15、9不與父邊界重疊不與父邊界重疊垂直邊界相加垂直邊界相加不與父邊界重疊不與父邊界重疊實(shí)驗(yàn)實(shí)驗(yàn) 9 小結(jié)：小結(jié)：（1）浮動(dòng)元素的垂直邊界不）浮動(dòng)元素的垂直邊界不發(fā)生重疊，而是相加。發(fā)生重疊，而是相加。（2）浮動(dòng)的子元素與父元素）浮動(dòng)的子元素與父元素的垂直邊界也不發(fā)生重疊。的垂直邊界也不發(fā)生重疊。浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 10#box1 float: left;#box2 clear: left;#box3 float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 10#box1 float: left;#box2 clear: left; margin: 20px 0;#box3 float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn)

16、 10#box1 float: left; margin-bottom: 20px;#box2 clear: left; margin: 20px 0;#box3 float: left;浮動(dòng)實(shí)驗(yàn)浮動(dòng)實(shí)驗(yàn) 10實(shí)驗(yàn)實(shí)驗(yàn) 10 小結(jié)：小結(jié)：普通塊元素對(duì)浮動(dòng)元素設(shè)置普通塊元素對(duì)浮動(dòng)元素設(shè)置上邊界無(wú)效。上邊界無(wú)效?？梢越o浮動(dòng)元素設(shè)置下邊界可以給浮動(dòng)元素設(shè)置下邊界實(shí)現(xiàn)間隔。實(shí)現(xiàn)間隔。兩列浮動(dòng)布局兩列浮動(dòng)布局四四兩列布局網(wǎng)頁(yè)的邏輯結(jié)構(gòu)兩列布局網(wǎng)頁(yè)的邏輯結(jié)構(gòu)#container#header#content#footer#sidebar 方法方法1#container#header#content#foo

17、ter#sidebar#sidebar width: 240px; float: left;#content margin-left: 240px;#footer clear:both;float: leftclear: bothmargin-left: 240px方法方法2#container#header#content#footer#sidebar#sidebar float: left; width: 240px; #content float: right; width: 500px;#footer clear:both;float: rightfloat: leftclear: b

18、oth三列浮動(dòng)布局三列浮動(dòng)布局 五五CSS 布局布局三列布局網(wǎng)頁(yè)的邏輯結(jié)構(gòu)三列布局網(wǎng)頁(yè)的邏輯結(jié)構(gòu)#container#header#content#footer#sidebar2#sidebar1 方法方法1#container#header#content#footer#sidebar2#sidebar1#sidebar1 float: left; width: 170px;#content float: left; width: 400px;#sidebar2 float: right; width: 170px;#footer clear:both;float: leftfloat: leftclear: bothfloat: right方法方法2#container#header#content#footer#sidebar1#sidebar2#sidebar1 float:right; width: 170px;#content float: right; width: 400px;#s