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

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

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

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

64

查看详情

回复讨论(解决方案)

没太明白什么意思？？？

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

浮动脱离正常的文档流，就类似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部分。