浮动布局PPT课件.ppt

第8章浮动布局 聊城大学传媒技术学院王丽萍 本章内容 固定宽度网页布局 8 1 固定宽度 居左 container width 760px 固定宽度 居中 container width 760px margin 0auto 固定宽度 居右 container width 540px margin 000auto 固定宽度网页布局 居左 container width 760px 居中 container width 760px margin 0auto 居右 container width 760px margin 000auto 网页元素的三种位置方式 8 2 普通流浮动定位相对定位绝对定位固定定位 网页元素的三种位置方式 浮动的概念 8 3 8 3 1浮动 float 浮动的方式 8 3 2清理浮动 clear 清理浮动的方法 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认识浮动 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 4IE6浮动元素双倍边界bug 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 8 3 4IE6浮动元素双倍边界bug box1 box2 box3 box4 box5 box6 box7 float left margin 10px width 80px display inline box7 width 200px box8 clear left 8 3 4IE6浮动元素双倍边界bug box1 box2 box3 box4 box5 box6 box7 float left margin 10px width 80px display inline box7 width 200px box8 clear left 8 3 4IE6浮动元素双倍边界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 方法二 利用一个子元素清除浮动 两列布局网页的逻辑结构 container content sidebar container content sidebar sidebar width 240px float left 两列浮动布局 方法1 container content sidebar sidebar width 240px float left content margin left 240px 两列浮动布局 方法1 container content sidebar margin left 240px sidebar width 240px float left content margin left 240px 两列浮动布局 方法1 container content footer sidebar margin left 240px sidebar width 240px float left content margin left 240px footer clear both 两列浮动布局 方法1 container content footer sidebar margin left 240px sidebar width 240px float left content margin left 240px footer clear both clear both 两列浮动布局 方法1 container content sidebar sidebar width 240px float left 两列浮动布局 方法2 container content sidebar sidebar width 240px float left content width 500px float right 两列浮动布局 方法2 container content footer sidebar 两列浮动布局 方法2 sidebar width 240px float left content width 500px float right footer clear both container content footer sidebar 两列浮动布局 方法2 sidebar width 240px float left content width 500px float right footer clear both 三列布局网页的逻辑结构 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 三列浮动布局 方法1 sidebar1 float left width 170px content float left width 400px