CSS-浮动布局

第八章浮动布局聊城大学传媒技术学院王丽萍本章内容固定宽度网页布局一实现网页布局的三种方式二浮动的概念三两列浮动布局四三列浮动布局五让背景延伸六固定宽度网页布局一760px固定宽度，居左。#container{width:760px;}固定宽度，居中。#container{width:760px;margin:0auto;}760px760px固定宽度，居右。#container{width:760px;margin:000auto;}固定宽度网页布局居左#container{width:760px;}居中#container{width:760px;margin:0auto;}居右#container{width:760px;margin:000auto;}实现网页布局的三种方式二普通流浮动定位相对定位绝对定位固定定位实现网页布局的三种方式浮动的概念三1.浮动（float）浮动的元素可以左右移动，直到它的边缘碰到父元素的边缘或另一个浮动元素的边缘。浮动的方式取值说明float:left浮动在左边float:right浮动在右边float:none不浮动浮动实验1#box1{float:left;}浮动实验1#box1{float:left;}margin:010px;}浮动实验1#box1{float:left;}margin:010px;}#box2{float:left;margin:010px;}浮动实验1#box1{float:left;}margin:010px;}#box2{float:left;margin:010px;}#box3{float:left;margin:010px;}浮动实验1#box1{float:left;}margin:010px;}#box2{float:left;margin:010px;}#box3{float:left;margin:010px;}实验1小结：（1）不设置宽度时，浮动元素收缩至最小。（2）块状元素忽略浮动元素，文字环绕浮动元素。浮动实验1浮动实验2浮动实验2浮动实验2浮动实验2浮动实验2浮动实验2浮动实验2实验2小结：当空间不够时，浮动元素下移。浮动实验3浮动实验3浮动实验3浮动实验3浮动实验3实验3小结：当空间不够时，浮动元素下移。浮动元素下移时，可能被其它浮动元素卡住。浮动实验4#box3{float:left;}浮动实验4#box3{float:left;}浮动实验4#box3{float:right;}浮动实验4#box3{float:right;}浮动实验4实验4小结：浮动元素只对其后面的元素产生影响。浮动实验5#box2{width:200px;height:200px;float:left;}浮动实验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;}浮动实验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:220px;}#box4{clear:left;}浮动实验5实验5小结：（1）前面的元素浮动，后面的元素加margin，可以形成两列。（2）要用clear清除浮动元素对脚部元素产生的影响。浮动实验6#box2{width:200px;height:200px;float:left;}浮动实验6#box2{width:200px;height:200px;float:left;}#box3{width:400px;height:150px;float: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）两个元素同时浮动，可以形成两列。（2）要用clear清除浮动元素对脚部元素产生的影响。2.清理浮动清理浮动的方法取值说明clear:both两边不允许有浮动的对象clear:left左边不允许有浮动的对象clear:right右边不允许有浮动的对象浮动实验7divid=“father”divid=“son”/div/div#son{float:left;}浮动实验7#son{float:left;}divid=“father”divid=“son”/div/div结论：父元素不能包含浮动的子元素。浮动实验7#son{float:left;}divid=“father”divid=“son”/div/divdivclass=“clear”/div/div.clear{clear:both;}结论：可以利用一个空元素清除浮动，迫使父元素包含浮动的子元素。浮动实验7#son{float:left;}divid=“father”divid=“son”/div/div结论：可以让父元素同时浮动，迫使父元素包含浮动的子元素。#father{float:left;}浮动实验7#son{float:left;}divid=“father”divid=“son”/div/div结论：可以设置父元素的overflow属性为auto，迫使父元素包含浮动的子元素。#father{overflow:auto;}浮动实验7实验7小结：（1）父元素不能包含浮动的子元素。（2）迫使父元素包含子元素的方法有三种：a.用一个空元素清理浮动；b.父元素同时浮动。c.设置父元素的overflow属性为auto。浮动实验8divid=“father”divid=“son”/div/div#son{float:left;}浮动实验8divid=“father”divid=“son”/div/div#son{float:left;}#father{widht:100%;}浮动实验8实验8小结：（1）IE6对父元素与浮动的子元素之间的关系进行了错误的解析。（2）当父元素未设置width或height时，父元素不包含浮动的子元素。（3）当父元素设置了width或height时，父元素自动包含浮动的子元素。浮动实验9#son1,#son2{width:100px;height:100px;margin:50px0;}#father{width:150px;}divid=“father”divid=“son1”/divdivid=“son2”/div/div垂直边界重叠垂直边界重叠垂直边界重叠浮动实验9#son1,#son2{width:100px;height:100px;margin:50px0;float:left;}#father{width:150px;}浮动实验9#son1,#son2{width:100px;height:100px;margin:50px0;float:left;}#father{width:150px;overflow:auto;}不与父边界重叠垂直边界相加不与父边界重叠浮动实验9不与父边界重叠垂直边界相加不与父边界重叠实验9小结：（1）浮动元素的垂直边界不发生重叠，而是相加。（2）浮动的子元素与父元素的垂直边界也不发生重叠。浮动实验10#box1{float:left;}#box2{clear:left;}#box3{float:left;}divid=“box1”/divdivid=“box2”/divdivid=“box3”/div浮动实验10#box1{float:left;}#box2{clear:left;margin:20px0;}#box3{float:left;}divid=“box1”/divdivid=“box2”/divdivid=“box3”/div浮动实验10#box1{float:left;margin-bottom:20px;}#box2{clear:left;margin:20px0;}#box3{float:left;}divid=“box1”/divdivid=“box2”/divdivid=“box3”/div浮动实验10divid=“box1”/divdivid=“box2”/divdivid=“box3”/div实验10小结：普通块元素对浮动元素设置上边界无效。可以给浮动元素设置下边界实现间隔。两列浮动布局四两列布局网页的逻辑结构#container#header#content#footer#sidebarbodydivid=“container”divid=“header”…/divdivid=“sidebar”…/divdivid=“content”…/divdivid=“footer”…/div/div/body方法1#container#header#content#footer#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:both三列浮动布局五CSS布局三列布局网页的逻辑结构#container#header#content#footer#sidebar2#sidebar1bodydivid=“container”divid=“header”…/divdivid=“sidebar1”…/divdivid=“content”…/divdivid=“sidebar2”…/divdivid=“footer”…/div/div/body方法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:170p