CSS-浮動布局

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

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

3、父元素的邊浮動的元素可以左右移動，直到它的邊緣碰到父元素的邊緣或另一個浮動元素的邊緣。緣或另一個浮動元素的邊緣。v 浮動的方式浮動的方式 取值取值 說明說明 float : left 浮動在左邊浮動在左邊 float : right 浮動在右邊浮動在右邊 float : none 不浮動不浮動浮動實驗浮動實驗 1#box1 float: left;浮動實驗浮動實驗 1#box1 float: left; margin: 0 10px;浮動實驗浮動實驗 1#box1 float: left; margin: 0 10px;#box2 float: left; margin: 0 10px;浮動實

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

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

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

7、驗 5#box2 width: 200px; height: 200px; float: left;#box3 height: 150px; margin-left: 220px;浮動實驗浮動實驗 5#box2 width: 200px; height: 200px; float: left;#box3 height: 150px; margin-left: 220px;#box4 clear: left;浮動實驗浮動實驗 5#box2 width: 200px; height: 200px; float: left;#box3 height: 150px; margin-left: 220p

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

9、at: right;浮動實驗浮動實驗 6#box2 width: 200px; height: 200px; float: left;#box3 width: 400px; height: 150px; float: right;#box4 clear: both;浮動實驗浮動實驗 6#box2 width: 200px; height: 200px; float: left;#box3 width: 400px; height: 150px; float: right;#box4 clear: both;浮動實驗浮動實驗 6實驗實驗 6 小結：小結：（1）兩個元素同時?。﹥蓚€元素同時浮動，可

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

11、浮動實驗浮動實驗 7#son float: left; .clear clear: both;結論：可以利用一個空元素清除浮動，迫使父元素包含浮動的子元素。結論：可以利用一個空元素清除浮動，迫使父元素包含浮動的子元素。浮動實驗浮動實驗 7#son float: left; 結論：可以讓父元素同時浮動，迫使父元素包含浮動的子元素。結論：可以讓父元素同時浮動，迫使父元素包含浮動的子元素。#father float: left;浮動實驗浮動實驗 7#son float: left; 結論：可以設置父元素的結論：可以設置父元素的 overflow 屬性為屬性為 auto ，迫使父元素包含浮動，迫使父元

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

13、 8實驗實驗 8 小結：小結：（1） IE6 對父元素與浮動的子元對父元素與浮動的子元素之間的關系進行了錯誤的解析。素之間的關系進行了錯誤的解析。（2）當父元素未設置）當父元素未設置 width 或或 height 時，父元素不包含浮動的子時，父元素不包含浮動的子元素。元素。（3）當父元素設置）當父元素設置 了了width 或或 height 時，父元素自動包含浮動的時，父元素自動包含浮動的子元素。子元素。浮動實驗浮動實驗 9#son1 , #son2 width: 100px; height: 100px; margin: 50px 0;#father width: 150px; 垂直邊界重

14、疊垂直邊界重疊垂直邊界重疊垂直邊界重疊垂直邊界重疊垂直邊界重疊浮動實驗浮動實驗 9#son1 , #son2 width: 100px; height: 100px; margin: 50px 0; float: left;#father width: 150px;浮動實驗浮動實驗 9#son1 , #son2 width: 100px; height: 100px; margin: 50px 0; float: left;#father width: 150px; overflow: auto;不與父邊界重疊不與父邊界重疊垂直邊界相加垂直邊界相加不與父邊界重疊不與父邊界重疊浮動實驗浮動實驗

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

16、 10#box1 float: left; margin-bottom: 20px;#box2 clear: left; margin: 20px 0;#box3 float: left;浮動實驗浮動實驗 10實驗實驗 10 小結：小結：普通塊元素對浮動元素設置普通塊元素對浮動元素設置上邊界無效。上邊界無效。可以給浮動元素設置下邊界可以給浮動元素設置下邊界實現(xiàn)間隔。實現(xiàn)間隔。兩列浮動布局兩列浮動布局四四兩列布局網(wǎng)頁的邏輯結構兩列布局網(wǎng)頁的邏輯結構#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三列浮動布局三列浮動布局 五五CSS 布局布局三列布局網(wǎng)頁的邏輯結構三列布局網(wǎng)頁的邏輯結構#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