热搜:NVER node 开发 php

普通文档流何以为浮动框让道?_html/css_WEB-ITnose

2024-11-27 22:15:01
普通文档流何以为浮动框让道?_html/css_WEB-ITnose

资料上说,
  "浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。"
资料又说,
  "在下面的段落中,我们添加了一个样式为 float:right 的图像。结果是这个图像会浮动到段落的右侧。"

我看到了,文本围在了图片的周围。这让我很迷惑,都让别人给他让道了,这样还能说“表现得就像不存在一样"?
我的问题是,
Q:CSS的浮动框既然没有在普通流里,为什么浮动框没有像上层图层一样,盖住下面的内容,反而让普通文档流为它缩进了?


回复讨论(解决方案)

没太明白什么意思???

这个有点像照相,前面的人把你挡住了,你还是想露出个头来。

浮动脱离正常的文档流,就类似word里的文字环绕显示

这个有点像照相,前面的人把你挡住了,你还是想露出个头来。
是啊,我的理解是图层,也是相当于照样的。仅能露个头,其它的是要被盖住的 。
但实际上没有啊!

浮动脱离正常的文档流,就类似word里的文字环绕显示
那还叫什么脱离啊,不还是在文档流里吗?比如说,没有对图片设置浮动,那么说图与文是按先后垂直排列的。 它这个“脱离”,到底是怎样一种概念?

看下面的行框与清理:
http://www.w3cschool.cn/css_positioning_floating.html

引用 2 楼 acesidonu 的回复:

这个有点像照相,前面的人把你挡住了,你还是想露出个头来。

是啊,我的理解是图层,也是相当于照样的。仅能露个头,其它的是要被盖住的 。
但实际上没有啊!


引用 3 楼 li649905271 的回复:

浮动脱离正常的文档流,就类似word里的文字环绕显示

那还叫什么脱离啊,不还是在文档流里吗?比如说,没有对图片设置浮动,……

我说的脱离文档流  是从布局方面    

楼主不要纠结于此,其实“脱离文档流”并不一定对其他文档流中的元素没有影响啊,这是对概念内涵的理解问题,如果你转变对“脱离文档流”的理解,就好了
另外,浮动的机制是这样的:元素浮动后,跟随其后的块框(设为框A)的表现就像浮动框不存在一样,但是,如果A块框中有“行框(line box)”【注意这个“行框(line box)”的概念与“行内框(inline box)”的概念不同)】,那么行框会缩短以避免被浮动框遮盖,就是说,对于A框来说,其实它还是被浮动框盖住了,只是A框中content区域中的“行框(line box)”缩短了,没有从content的边界开始格式化,实现了环绕浮动框的效果。楼主可以这样试一下,将A框的宽度和高度设为固定值,或者比浮动框的大,或者比浮动框的小,你就能明显看出来这种覆盖效果。
更详细的知识给你推荐两个网站:
1.http://www.w3schools.com,这个是w3school的英文网站,感觉阐述的比中文网站清晰;
2.http://www.w3.org/TR/2011/REC-CSS2-20110607/,这个是W3C官网中CSS2.1规范,重点看第9和第10部分。

相关推荐