打印

[教程] 彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)

classes

初级会员

帖子: 51
体力: 111
威望: 0
离线: 318 天

31^# 大中小发表于 2007-7-3 16:52

不愿继续。。。。

楼主看了你的所有教程，
不感谢你不行了~~~
让我这老是潜水的人~也得出来说句话了~~~~
谢谢你~~~希望能有更多的教程出来~~从多方位，多角度去了解CSS

TOP

Elfnina

中级会员

帖子: 467
体力: 368
威望: 0
当前: 北京海淀区
离线: 5 天

32^# 大中小发表于 2007-7-4 10:59

我感觉有些地方楼主加了<p>，反而效果更不形象了。。。

TOP

zwbfw

高级会员

帖子: 200
体力: 538
威望: 0
离线: 216 天

发短消息

33^# 大中小发表于 2007-7-4 20:50

太需要了，谢谢呀

TOP

joymv

貌似没几年青春
中级会员

帖子: 263
体力: 419
威望: 0
当前: 江西南昌
离线: 8 天

专长 网页设计,PHP

34^# 大中小发表于 2007-7-5 07:17

29,30同样的内容不要发两次..

iT堂

TOP

cinhoo

新手上路

帖子: 5
体力: 13
威望: 0
离线: 339 天

发短消息

35^# 大中小发表于 2007-8-14 22:37

顶LZ..讲的太好了....

TOP

zbm2001z

宝儿
荣誉管理团队

帖子: 1446
体力: 3791
威望: 41
当前: 北京昌平区

专长 网页设计,Flash,JS

36^# 大中小发表于 2007-8-15 02:54

引用:

原帖由 webflash 于 2007-4-1 17:08 发表

5．如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性，子盒子漂浮后不会影响到父盒子的宽度，子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的……

（2）浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况，那么一个浮动盒子又会不会越到另一个浮动对象上面去呢，实质上它们是不会重叠的，即使用了负边界看起来像重叠在一起。

说法欠妥，依旧是“层叠”和“堆叠”概念没有澄清引起的。

另外：
清除浮动的原理几乎没有提及，而这又往往与清除浮动元素相关的margin重叠紧密相关（否则无法理解与之相关的margin重叠现象）。

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

37^# 大中小发表于 2007-8-15 17:19

修正说法！

引用:

原帖由 zbm2001z 于 2007-8-15 02:54 发表
引用:
原帖由 webflash 于 2007-4-1 17:08 发表

5．如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性，子盒子漂浮后不会影响到父盒子的宽度，子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的……

（2）浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况，那么一个浮动盒子又会不会越到另一个浮动对象上面去呢，实质上它们是不会重叠的，即使用了负边界看起来像重叠在一起。
说法欠妥，依旧是“层叠”和“堆叠”概念没有澄清引起的。

另外：
清除浮动的原理几乎没有提及，而这又往往与清除浮动元素相关的margin重叠紧密相关（否则无法理解与之相关的margin重叠现象）。

请用FF浏览器运行下面代码，并参阅代码后再看后面新的分析！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>子级元素宽大于父级元素宽的情况[请用标准浏览器查看]</title>
<style type="text/css">

</style>
</head>
<body>
<div id="box">我现在左浮动（float:left），我的宽小于子盒子，但它不会把我撑开。
  <div id="box2">我是子盒子，我的宽比父级要大，宽于父盒子的部分在大盒子左边越出。</div>
</div>
<p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p>
</body>
</html>

提示：您可以先修改部分代码再运行

同样具有浮动属性的子级，不和父级一同影响和父级同在一级的文本流。在此实例中，红色的字只浮动在蓝色盒子的边界外，而不会是浮动在蓝色和绿色盒子相交（联想两个盒子相加后有点像手榴弹）后的边界外。在此实例中，蓝色盒子box与红字P处在同一级，它们都没有指定position和z-index属性，它们的堆叠关系将由它们在文档中出现的顺序决定，后出现的堆叠在前出现的上面，p堆叠box之上，而绿色盒子box2在box内，是box的子级，它的层级不会逾越其父级元素box,所以最终看到的效果是红色字覆盖在绿色盒子的黑色字之上。晕，好像有点离题，主要讲到定位去了...

清除浮动或者叫闭合浮动的元素的方法适用在自适应高度，即没有指定高度，或者高度设为自动的父级元素高度可以随子级内容高度变化而变化。

忙

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

38^# 大中小发表于 2007-8-15 17:22

引用:

原帖由 kuner1129 于 2007-5-14 12:13 发表
关于clear 第一个小例子那儿, clear:none 这里
我试了下,在IE和firefox里,把 clear:none这句加上和去掉效果是一样的啊,它是不是默认的就是这样?

引用:

1.我不动声色（我的属性不设置的时候），即：float:none,或者样式中不写这一项时，网页中的元素将按照它们自身的出现方式排列，一般是靠边对齐，先出现的排在前边...

没错，clear:none;是浏览器默认方法。

引用:

原帖由 woxindead 于 2007-5-31 15:46 发表
所谓标准不都是一步一步调出来的吗
在FF下可以用什么代替li
如果用li怎么控制它的高度

1.XHTML的标签是不可代替的，不同标签有它的语义。就像P，它指的是段落，除了P还有什么标签能很直接的说明内容是段落？尽管你可以用DIV做出个类似段落的表现来，这样都是不科学的。
2.高度可以用行高（line-height）和元素高度（height）直接指定，值得注意的是用行高（line-height）需给盒子指定内容与字体大小（font-size），不然。。。自己试试看吧。。。

忙

TOP

zbm2001z

宝儿
荣誉管理团队

帖子: 1446
体力: 3791
威望: 41
当前: 北京昌平区

专长 网页设计,Flash,JS

39^# 大中小发表于 2007-8-15 19:11

首先理解“层叠”和“堆叠”概念是必要的。

……子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的……——不是覆盖

p堆叠box2之上——这里也不存在堆叠关系

这些都是是“层叠”关系，即：这些盒子本身不相互对彼此包含的行内元素和置换元素产生覆盖，而仅仅是它们所包含的行内元素和置换元素之间依照常规流次序互相交叠、覆盖（也就是37#楼的测试结果）。

这也是在这篇彻底弄懂CSS盒子模式四(绝对定位和相对定位)中，需要澄清的这两个概念。

连带堆叠（FF、OPERA、IE7亦可测）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>子级元素宽大于父级元素宽的情况[请用标准浏览器查看]</title>
<style type="text/css">

</style>
</head>
<body>
<div id="box">我现在左浮动（float:left），我的宽小于子盒子，但它不会把我撑开。
  <div id="box2">我是子盒子，我的宽比父级要大，宽于父盒子的部分在大盒子左边越出。</div>
</div>
<p style="position:relative;background:#fff">什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p>
</body>
</html>

提示：您可以先修改部分代码再运行

局部堆叠：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>子级元素宽大于父级元素宽的情况[请用标准浏览器查看]</title>
<style type="text/css">

</style>
</head>
<body>
<div id="box">我现在左浮动（float:left），我的宽小于子盒子，但它不会把我撑开。
  <div id="box2">我是子盒子，我的宽比父级要大，宽于父盒子的部分在大盒子左边越出。</div>
</div>
<p style="position:relative;display:inline;background:#fff">什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 zbm2001z 于 2007-8-15 19:23 编辑 ]

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

40^# 大中小发表于 2007-8-16 11:19

引用:

原帖由 zbm2001z 于 2007-8-15 19:11 发表
首先理解“层叠”和“堆叠”概念是必要的。

……子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的……——不是覆盖

p堆叠box2之上 ...

强烈要求宝儿出个教程，详细说一下“层叠”和“堆叠”概念与关系，似乎“堆叠”概念较少听，相信不少网友也想学习一下，期待学习...

忙

TOP

wwdzcjsmxx

初级会员

帖子: 79
体力: 164
威望: 0
当前: 浙江温州
离线: 7 天

发短消息

41^# 大中小发表于 2007-10-17 17:57

float的第6个例子和clear的第3个例子我在ie7下都试不出效果来。。。orz...
教程真强大，学到了

TOP

风若吹

中级会员

帖子: 88
体力: 258
威望: 0
离线: 28 天

发短消息

42^# 大中小发表于 2007-12-7 14:53

最后一个没看明白
body div {clear:both;}是写在最前面的,可是按着优先极的原则它应该被下面的clear:left;所附盖,怎么会没有呢?

TOP

风若吹

中级会员

帖子: 88
体力: 258
威望: 0
离线: 28 天

发短消息

43^# 大中小发表于 2007-12-7 14:59

clear的第三个例子没搞明白,
body div {clear:both;}这个是放在第一行的,按照原则它会被后面的clear:left;所覆盖,为什么没有呢?

TOP

kecai

新手上路

帖子: 12
体力: 27
威望: 0
离线: 39 天

发短消息

44^# 大中小发表于 2007-12-15 15:43

引用:

原帖由 风若吹 于 2007-12-7 14:59 发表
clear的第三个例子没搞明白,
body div {clear:both;}这个是放在第一行的,按照原则它会被后面的clear:left;所覆盖,为什么没有呢?

94阿！

TOP

wowufeng

新手上路

帖子: 17
体力: 42
威望: 0
离线: 33 天

发短消息

45^# 大中小发表于 2007-12-17 11:52

楼上的看错了，是float:left;不是clear:left

TOP

yueyue87

新手上路

帖子: 6
体力: 19
威望: 0
离线: 89 天

发短消息

46^# 大中小发表于 2007-12-22 14:15

我想问楼主浮动的问题。在有些网页里看到：有两个层，一个浮动到左边，一个浮动到右边，浮动到右边的设置了一个很宽的margin,而浮动到左边的那个层却可以放置在了那个margin之上，这是为什么呢？

TOP

pcunion

新手上路

帖子: 8
体力: 22
威望: 2
离线: 17 天

47^# 大中小发表于 2007-12-23 00:14

得要好好学习下,谢谢分享.

TOP

zhoni

高级会员

帖子: 198
体力: 630
威望: 0
离线: 80 天

48^# 大中小发表于 2008-1-21 00:07

顶啊顶啊顶啊顶啊顶啊

http://www.hnau.netCSS+DIV专心学习

TOP

wyjysblue

初级会员

帖子: 33
体力: 66
威望: 0
离线: 64 天

发短消息

49^# 大中小发表于 2008-1-29 14:17

学到新的东西了

TOP

williamting

高级会员

帖子: 395
体力: 703
威望: 2
离线: 4 天

50^# 大中小发表于 2008-1-29 19:32

强帖，受教了

TOP

iddison

新手上路

帖子: 4
体力: 9
威望: 0
离线: 153 天

发短消息

51^# 大中小发表于 2008-2-12 22:22

太好了顶ing

TOP

oneyou13

初级会员

帖子: 35
体力: 69
威望: 0
离线: 12 天

发短消息

52^# 大中小发表于 2008-2-15 20:10

好强哦

TOP

Jolinv

初级会员

帖子: 94
体力: 183
威望: 0
当前: 福建泉州
离线: 2 天

发短消息

53^# 大中小发表于 2008-2-15 23:35

谢谢楼主分享~ 细心学习中~ THX

TOP

lifeseato

初级会员

帖子: 86
体力: 181
威望: 0
离线: 31 天

发短消息

54^# 大中小发表于 2008-2-22 15:31

很清楚明了可还有一点我想问下为什么浮动可以把两个层上下间的空白去掉呢？
例如：
<p></p>
<p></p>
两个层间有空白如果加上float:left那就会紧靠了（为什么两个层间会有空白）、
我写css的时候总喜欢加上*{margin:0;padding:0} 但P之间还是会有个空白一定要加上float

TOP

c2j3y4

初级会员

帖子: 53
体力: 124
威望: 0
离线: 1 天

发短消息

55^# 大中小发表于 2008-3-15 10:30

最后的那个不太明白

JS菜鸟努力

TOP

juejiangmao

新手上路

帖子: 69
体力: 46
威望: 0
当前: 浙江杭州
离线: 47 天

发短消息

56^# 大中小发表于 2008-4-3 11:42

写的很好呢。~~
我觉得很易懂。谢谢~

TOP

nyu16

夏夜
中级会员

帖子: 172
体力: 300
威望: 0
当前: 浙江杭州

专长 前端制作,PHP,安全

57^# 大中小发表于 2008-4-3 12:40

回复 #1 webflash 的帖子

好帖子，收藏

温经散寒补肝肾强筋骨

TOP

introduction

新手上路

帖子: 5
体力: 15
威望: 0

发短消息

58^# 大中小发表于 2008-4-23 11:01

引用:

原帖由 风若吹 于 2007-12-7 14:53 发表
最后一个没看明白
body div {clear:both;}是写在最前面的,可是按着优先极的原则它应该被下面的clear:left;所附盖,怎么会没有呢?

你应该是说被float:left;所附盖吧?

float作用于当前盒子本身,而clear是作用于当前盒子两边的同级盒子,没冲突啊,应该不存在覆盖这说法啊?望楼主来更指点一下

TOP

introduction

新手上路

帖子: 5
体力: 15
威望: 0

发短消息

59^# 大中小发表于 2008-4-23 11:05

引用:

原帖由 lifeseato 于 2008-2-22 15:31 发表
很清楚明了可还有一点我想问下为什么浮动可以把两个层上下间的空白去掉呢？
例如：

两个层间有空白如果加上float:left那就会紧靠了（为什么两个层间会有空白）、
我写css的时候总喜欢加上*{margin:0;paddi ...

没仔细看清楚楼主的教程吧?楼主说过了块级远素在没有定义float之前是按从上到下的先后顺序来排列的

TOP

dinggg1

新手上路

帖子: 2
体力: 9
威望: 0
离线: 81 天

发短消息

60^# 大中小发表于 2008-4-26 09:51

难得一见的好教程，签名留念！

TOP