第8章-浮动布局

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,第,8,章浮动布局,聊城大学传媒技术学院王丽萍,本章内容,固定宽度网页布局,8.1,实现网页布局的三种方式,8.2,浮动的概念,8.3,两列浮动布局,8.4,三列浮动布局,8.5,伪列,8.6,固定宽度网页布局,8.1,760px,固定宽度，居左。,#container ,width: 760px;,固定宽度，居中。,#container ,width: 760px;,margin: 0 auto;,760px,540px,固定宽度，居右。,#container ,width: 540px;,margin: 0 0 0 auto;,固定宽度网页布局,居左,#container width: 760px; ,居中,#container width: 760px; margin: 0 auto; ,居右,#container width: 760px; margin: 0 0 0 auto; ,网页元素的三种位置方式,8.2,普通流,浮动,定位 相对定位 绝对定位 固定定位,网页元素的三种位置方式,浮动的概念,8.3,8.3.1,浮动（,float,）,浮动的方式,取值,说明,float : left,向左边浮动,float : right,向右边浮动,float : none,不浮动,8.3.2,清理浮动（,clear,）,清理浮动的方法,取值,说明,clear : both,为两边的浮动元素让开足够的空间,clear : left,为左边的浮动元素让开足够的空间,clear : right,为右边的浮动元素让开足够的空间,8.3.3,认识浮动,第一个,Div,第二个,Div,第三个,Div,第四个,Div,第五个,Div,第六个,Div,聊城大学是山东省属综合性大学，坐落在,学校拥有硕士、学士学位授予权和开展同等学力人员,#box1 float: left; ,8.3.3,认识浮动,#box1 float: left; ,#box1 float: left;,margin: 10px; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left; ,#box2 float: left;,margin: 10px; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left;,margin: 10px; ,#box3 float: left;,margin: 10px; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left;,margin: 10px; ,#box3 float: left;,margin: 10px; ,#box4 float: left;,margin: 10px; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left;,margin: 10px; ,#box3 float: left;,margin: 10px; ,#box4 float: left;,margin: 10px; ,#box5 float: left;,margin: 10px; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left;,margin: 10px; ,#box3 float: left;,margin: 10px; ,#box4 float: left;,margin: 10px; ,#box5 float: left;,margin: 10px; ,#box6 float: left;,margin: 10px; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left;,margin: 10px; ,#box3 float: left;,margin: 10px; ,#box4 float: left;,margin: 10px; ,#box5 float: left;,margin: 10px; ,#box6 float: left;,margin: 10px; ,#box7 float: left;,margin: 10px; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left;,margin: 10px; ,#box3 float: left;,margin: 10px; ,#box4 float: left;,margin: 10px; ,#box5 float: left;,margin: 10px; ,#box6 float: left;,margin: 10px; ,#box7 float: left;,margin: 10px; ,#box8 clear: left; ,8.3.3,认识浮动,#box1 float: left;,margin: 10px; ,#box2 float: left;,margin: 10px; ,#box3 float: left;,margin: 10px; ,#box4 float: left;,margin: 10px; ,#box5 float: left;,margin: 10px; ,#box6 float: left;,margin: 10px; ,#box7 float: left;,margin: 10px; ,#box8 clear: left; ,8.3.3,认识浮动,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,#box8 ,clear: left;,8.3.3,认识浮动,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,#box8 ,clear: left;,8.3.3,认识浮动,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,width: 80px;,#box7 ,width: 200px;,#box8 ,clear: left;,8.3.3,认识浮动,10px,20px,10px,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,width: 80px;,#box7 ,width: 200px;,#box8 ,clear: left;,8.3.3,认识浮动,小结：,如果让一个元素浮动，它会向左或者向右浮动直至遇到父元素的边缘。如果向同一方向再浮动一个元素，它会浮动直至遇到前一个浮动元素的边缘。,如果向同一方向浮动多个元素，它们将一个挨一个排列，当水平空间无法容纳更多的浮动元素时，浮动元素会换行排列。,浮动元素离开了正常的文档流。浮动元素之后的块状元素将忽略它并占据它原来的空间。行内元素（文字）会围绕在浮动元素周围。,如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“,clear”,属性。,应该为浮动元素设定宽度。如果不设定宽度，浮动元素有宽度最小化的趋势，在不同的浏览器中会有不同的结果。,浮动元素的垂直边距（,margin,）不会重叠。,8.3.4 IE6,浮动元素双倍边界,bug,10px,20px,20px,20px,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,width: 80px;,#box7 ,width: 200px;,#box8 ,clear: left;,出现错误,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,width: 80px;,#box7 ,width: 200px;,#box8 ,clear: left;,20px,20px,20px,20px,8.3.4 IE6,浮动元素双倍边界,bug,出现错误,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,width: 80px;,display: inline;,#box7 ,width: 200px;,#box8 ,clear: left;,20px,20px,20px,20px,8.3.4 IE6,浮动元素双倍边界,bug,#box1, #box2, #box3, #box4,#box5, #box6, #box7 ,float: left;,margin: 10px;,width: 80px;,display: inline;,#box7 ,width: 200px;,#box8 ,clear: left;,8.3.4 IE6,浮动元素双倍边界,bug,小结：,IE6.0,错误地将浮动元素与父元素之间的边界加倍，称为,IE,浮动元素双倍边界,bug,。,修复,IE,浮动元素双倍边界,bug,的方法是为浮动元素设置,display:inline,。,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px;,height: 300px; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px;,height: 300px; ,#box5 ,width: 80px;,float: right; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px;,height: 300px; ,#box5 ,width: 80px;,float: right;,margin: 10px; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px;,height: 300px; ,#box5 ,width: 80px;,float: right;,margin: 10px;,height: 180px; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px;,height: 300px; ,#box5 ,width: 80px;,float: right;,margin: 10px;,height: 180px; ,#box7 ,width: 200px;,float: right; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px;,height: 300px; ,#box5 ,width: 80px;,float: right;,margin: 10px;,height: 180px; ,#box7 ,width: 200px;,float: right; ,#box8 ,clear: right; ,8.3.5,浮动元素的垂直位置及影响范围,#box2 ,width: 80px;,float: left;,margin: 10px;,height: 300px; ,#box5 ,width: 80px;,float: right;,margin: 10px;,height: 180px; ,#box7 ,width: 200px;,float: right; ,#box8 ,clear: both; ,8.3.5,浮动元素的垂直位置及影响范围,#box3 ,clear: left; ,8.3.5,浮动元素的垂直位置及影响范围,#box3 ,clear: left; ,#box6 ,clear: right; ,小结：,浮动元素的垂直位置由它原来所处文档流的位置决定。浮动元素只能从原来位置水平地向左或向右浮动，不可能斜向上或斜向下浮动。,浮动元素不对其前面的元素产生影响，而只对其后面的元素产生影响。,8.3.6,浮动的子元素,#father ,background: #FF99CC;,#son1,background: #FFFF66;,width: 100px;,#son2,background: #99CCFF;,width: 100px;,我是子元素,1,我是子元素,2,#son1 ,float: right;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,#father ,overflow: hidden;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,#father ,overflow: hidden;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,#father ,overflow: hidden;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,#father ,overflow: hidden;,width: 100%;,8.3.6,浮动的子元素,8.3.6,浮动的子元素,我是子元素,1,我是子元素,2,我是子元素,3,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,#son3 ,clear: both;,8.3.6,浮动的子元素,#son1 ,float: right;,#son2 ,float: left;,#son3 ,clear: both;,小结：,父元素不能包含浮动的子元素。,迫使父元素包含子元素的方法：,方法一：为父元素设置,overflow: hidden,或,overflow: auto,。对于,IE6,浏览器，需要为父元素设置,width,。,方法二：利用一个子元 素清除浮动。,两列浮动布局,8.4,两列布局网页的逻辑结构,container,header,content,footer,sidebar,container,header,content,footer,sidebar,#sidebar ,width: 240px;,float: left;,两列浮动布局方法,1,container,header,content,footer,sidebar,float: left,#sidebar ,width: 240px;,float: left;,#content ,margin-left: 240px;,两列浮动布局方法,1,container,header,content,footer,sidebar,float: left,margin-left: 240px,#sidebar ,width: 240px;,float: left;,#content ,margin-left: 240px;,两列浮动布局方法,1,container,header,content,footer,sidebar,float: left,margin-left: 240px,#sidebar ,width: 240px;,float: left;,#content ,margin-left: 240px;,#footer ,clear:both;,两列浮动布局方法,1,container,header,content,footer,sidebar,float: left,margin-left: 240px,#sidebar ,width: 240px;,float: left;,#content ,margin-left: 240px;,#footer ,clear:both;,clear: both,两列浮动布局方法,1,container,header,content,footer,sidebar,#sidebar ,width: 240px;,float: left;,两列浮动布局方法,2,container,header,content,footer,sidebar,float: left,#sidebar ,width: 240px;,float: left;,#content ,width: 500px;,float: right;,两列浮动布局方法,2,container,header,content,footer,sidebar,float: left,两列浮动布局方法,2,float: right,#sidebar ,width: 240px;,float: left;,#content ,width: 500px;,float: right;,#footer ,clear: both;,container,header,content,footer,sidebar,float: left,两列浮动布局方法,2,float: right,#sidebar ,width: 240px;,float: left;,#content ,width: 500px;,float: right;,#footer ,clear: both;,三列浮动布局,8.5,三列布局网页的逻辑结构,container,header,sidebar2,footer,content,sidebar1,三列浮动布局方法,1,#sidebar1 ,float: left;,width: 170px;,container,header,sidebar2,footer,content,sidebar1,三列浮动布局方法,1,#sidebar1 ,float: left;,width: 170px;,#content ,float: left;,width: 400px;,container,header,sidebar2,footer,content,sidebar1,float: left,三列浮动布局方法,1,#sidebar1 ,float: left;,width: 170px;,#content ,float: left;,width: 400px;,#sidebar2 ,float: right;,width: 170px;,container,header,footer,content,sidebar1,float: left,float: left,sidebar2,三列浮动布局方法,1,#sidebar1 ,float: left;,width: 170px;,#content ,float: left;,width: 400px;,#sidebar2 ,float: right;,width: 170px;,#footer ,clear: both;,container,header,sidebar2,footer,content,sidebar1,float: left,float: left,float: right,三列浮动布局方法,1,#sidebar1 ,float: left;,width: 170px;,#content ,float: left;,width: 400px;,#sidebar2 ,float: right;,width: 170px;,#footer ,clear: both;,container,header,sidebar2,footer,content,sidebar1,float: left,float: left,float: right,clear: both,三列浮动布局方法,2,#sidebar1 ,float: right;,width: 170px;,#content ,float: right;,width: 400px;,#sidebar2 ,float: left;,width: 170px;,#footer ,clear: both;,container,header,sidebar1,footer,content,sidebar2,float: left,float: right,float: right,clear: both,伪列,8.6,伪列,创建伪列的方法是在,container,元素上应用一个垂直重复的背景图像。,#container ,background: url(images/bg.jpg) repeat-y;,Thank You !,