html div浮动最前面,CSS-浮动布局

《CSS-浮动布局》由会员分享，可在线阅读，更多相关《CSS-浮动布局(74页珍藏版)》请在人人文库网上搜索。

1、浮动布局浮动布局 本章内容本章内容 固定宽度网页布局固定宽度网页布局一一 实现网页布局的三种方式实现网页布局的三种方式 二二 浮动的概念浮动的概念 三三 两列浮动布局两列浮动布局 四四 三列浮动布局三列浮动布局 五五 让背景延伸让背景延伸 六六 固定宽度网页布局固定宽度网页布局一一 760px 固定宽度，居左。固定宽度，居左。 #container width: 760px; 固定宽度，居中。固定宽度，居中。 #container width: 760px; margin: 0 auto; 760px 760px 固定宽度，居右。固定宽度，居右。 #container width: 760px。

2、; margin: 0 0 0 auto; 固定宽度网页布局固定宽度网页布局 v 居左居左 #container width: 760px; v 居中居中 #container width: 760px; margin: 0 auto; v 居右居右 #container width: 760px; margin: 0 0 0 auto; 实现网页布局的三种方式实现网页布局的三种方式二二 v 普通流普通流 v 浮动浮动 v 定位定位 相对定位相对定位 绝对定位绝对定位 固定定位固定定位 实现网页布局的三种方式实现网页布局的三种方式 浮动的概念浮动的概念 三三 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 f。

4、loat: left; margin: 0 10px; 浮动实验浮动实验 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)不设置宽度时，)不设置宽度时， 浮动元素收缩至。

5、最小。浮动元素收缩至最小。 (2)块状元素忽略浮)块状元素忽略浮 动元素，文字环绕浮动元素，文字环绕浮 动元素。动元素。 浮动实验浮动实验 1 浮动实验浮动实验 2 浮动实验浮动实验 2 浮动实验浮动实验 2 浮动实验浮动实验 2 浮动实验浮动实验 2 浮动实验浮动实验 2 浮动实验浮动实验 2 实验实验 2 小结：小结： 当空间不够时，浮动元素下移。当空间不够时，浮动元素下移。 浮动实验浮动实验 3 浮动实验浮动实验 3 浮动实验浮动实验 3 浮动实验浮动实验 3 浮动实验浮动实验 3 实验实验 3 小结：小结： 当空间不够时，浮动元素下移。当空间不够时，浮动元素下移。浮动元素浮动元素 下移。

6、时，可能被其它浮动元素卡住。下移时，可能被其它浮动元素卡住。 浮动实验浮动实验 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: 200。

7、px; 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; 浮动实验浮动实验。

8、 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: 。

9、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; 。

10、#box3 width: 400px; height: 150px; float: right; #box4 clear: both; 浮动实验浮动实验 6 实验实验 6 小结：小结： (1)两个元素同时浮)两个元素同时浮 动，可以形成两列。动，可以形成两列。 (2)要用)要用 clear 清除清除 浮动元素对脚部元素浮动元素对脚部元素 产生的影响。产生的影响。 2. 清理浮动清理浮动 v 清理浮动的方法清理浮动的方法 取值取值 说明说明 clear : both 两边不允许有浮动的对象两边不允许有浮动的对象 clear : left 左边不允许有浮动的对象左边不允许有浮动的对象 clear 。

11、: right 右边不允许有浮动的对象右边不允许有浮动的对象 浮动实验浮动实验 7 #son float: left; 浮动实验浮动实验 7 #son float: left; 结论：父元素不能包含浮动的子元素。结论：父元素不能包含浮动的子元素。 浮动实验浮动实验 7 #son float: left; .clear clear: both; 结论：可以利用一个空元素清除浮动，迫使父元素包含浮动的子元素。结论：可以利用一个空元素清除浮动，迫使父元素包含浮动的子元素。 浮动实验浮动实验 7 #son float: left; 结论：可以让父元素同时浮动，迫使父元素包含浮动的子元素。结论：可以让父。

12、元素同时浮动，迫使父元素包含浮动的子元素。 #father float: left; 浮动实验浮动实验 7 #son float: left; 结论：可以设置父元素的结论：可以设置父元素的 overflow 属性为属性为 auto ，迫使父元素包含浮动，迫使父元素包含浮动 的子元素。的子元素。 #father overflow: auto; 浮动实验浮动实验 7 实验实验 7 小结：小结： (1)父元素不能包含浮动的子元)父元素不能包含浮动的子元 素。素。 (2)迫使父元素包含子元素的方)迫使父元素包含子元素的方 法有三种：法有三种： a. 用一个空元素清理浮动；用一个空元素清理浮动； b. 。

13、父元素同时浮动。父元素同时浮动。 c. 设置父元素的设置父元素的 overflow 属性为属性为 auto。 浮动实验浮动实验 8 #son float: left; 浮动实验浮动实验 8 #son float: left; #father widht: 100%; 浮动实验浮动实验 8 实验实验 8 小结：小结： (1) IE6 对父元素与浮动的子元对父元素与浮动的子元 素之间的关系进行了错误的解析。素之间的关系进行了错误的解析。 (2)当父元素未设置)当父元素未设置 width 或或 height 时，父元素不包含浮动的子时，父元素不包含浮动的子 元素。元素。 (3)当父元素设置)当父元素。

14、设置 了了width 或或 height 时，父元素自动包含浮动的时，父元素自动包含浮动的 子元素。子元素。 浮动实验浮动实验 9 #son1 , #son2 width: 100px; height: 100px; margin: 50px 0; #father width: 150px; 垂直边界重叠垂直边界重叠 垂直边界重叠垂直边界重叠 垂直边界重叠垂直边界重叠 浮动实验浮动实验 9 #son1 , #son2 width: 100px; height: 100px; margin: 50px 0; float: left; #father width: 150px; 浮动实验浮动实验 。

15、9 #son1 , #son2 width: 100px; height: 100px; margin: 50px 0; float: left; #father width: 150px; overflow: auto; 不与父边界重叠不与父边界重叠 垂直边界相加垂直边界相加 不与父边界重叠不与父边界重叠 浮动实验浮动实验 9 不与父边界重叠不与父边界重叠 垂直边界相加垂直边界相加 不与父边界重叠不与父边界重叠 实验实验 9 小结：小结： (1)浮动元素的垂直边界不)浮动元素的垂直边界不 发生重叠，而是相加。发生重叠，而是相加。 (2)浮动的子元素与父元素)浮动的子元素与父元素 的垂直边界也。

16、不发生重叠。的垂直边界也不发生重叠。 浮动实验浮动实验 10 #box1 float: left; #box2 clear: left; #box3 float: left; 浮动实验浮动实验 10 #box1 float: left; #box2 clear: left; margin: 20px 0; #box3 float: left; 浮动实验浮动实验 10 #box1 float: left; margin-bottom: 20px; #box2 clear: left; margin: 20px 0; #box3 float: left; 浮动实验浮动实验 10 实验实验 10 小。

17、结：小结： 普通块元素对浮动元素设置普通块元素对浮动元素设置 上边界无效。上边界无效。 可以给浮动元素设置下边界可以给浮动元素设置下边界 实现间隔。实现间隔。 两列浮动布局两列浮动布局四四 两列布局网页的逻辑结构两列布局网页的逻辑结构 #container #header #content #footer #sidebar 方法方法1 #container #header #content #footer #sidebar #sidebar width: 240px; float: left; #content margin-left: 240px; #footer clear:both; f。

18、loat: left clear: both margin-left: 240px 方法方法2 #container #header #content #footer #sidebar #sidebar float: left; width: 240px; #content float: right; width: 500px; #footer clear:both; float: rightfloat: left clear: both 三列浮动布局三列浮动布局 五五 CSS 布局布局 三列布局网页的逻辑结构三列布局网页的逻辑结构 #container #header #content #f。

19、ooter #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: left clear: both float: right 方法方法2 #container #header #content。

20、 #footer #sidebar1 #sidebar2 #sidebar1 float:right; width: 170px; #content float: right; width: 400px; #sidebar2 float: left; width: 170px; #footer clear:both; float: rightfloat: left clear: both float: right 让背景延伸让背景延伸六六 CSS 布局布局 让背景延伸让背景延伸 v 在在 container 上应用一个垂直重复的上应用一个垂直重复的 背景图像。背景图像。 #container width: 760px; margin: auto; text-align: left; background: url(images/container_bg.gif) repeat-y center top;。