日期:2014-05-17  浏览次数:20586 次

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

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



------解决方案--------------------
楼主不要纠结于此,其实“脱离文档流”并不一定对其他文档流中的元素没有影响啊,这是对概念内涵的理解问题,如果你转变对“脱离文档流”的理解,就好了
另外,浮动的机制是这样的:元素浮动后,跟随其后的块框(设为框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部分。