继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于float是否脱离标准文档流详细解析

weibo_哆啦A梦有大口袋_0
关注TA
已关注
手记 14
粉丝 45
获赞 184

首先我为什么会提出这个问题呢?
原因是我看《网页布局基础》这段视频(http://www.imooc.com/video/1337
在1.50秒的地方有一句这样的话。
"设置float的元素,仍处于标准文档流中"。
(我对这句话的理解:对的,因为float的元素处于标准文档流中,所以才会影响紧跟后面的元素啊,因为紧跟后面的元素是处在标准文档流中。所以我认为这个观点是正确的。)
于是每次回答初学者关于float的问题时,我就告诉他float的元素仍处于标准文档流之中。他们都说不对的,W3C文档中说脱离标准文档流,我表示不相信,于是我去看W3C
W3C

W3C说的是float的元素脱离的文档流。
"设置float的元素,仍处于标准文档流中"。 (慕课老师所说)
那么问题来了
文档流=标准文档流吗?
我们打个比方
菊花=菊花茶吗?
带着这样的疑问,我又去查找资料,
于是在知乎上查找到了一些有用的信息
文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后,会让它脱离文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有脱离文本流。
图片描述

这也就是float的元素为什么会影响紧跟后面的元素,原因是:float的元素脱离了文档流,但是没有脱离文本流,字体是认同浮动元素所占据的区域的。
我个人认为 :
标准文档流=文档流+文本流。(如果觉得我的观点不正确,请详细回答原因)
菊花茶=菊花+水
正确的来说,float的元素脱离文档流,但仍处于文本流中。

打开App,阅读手记
20人推荐
发表评论
随时随地看视频慕课网APP

热门评论

谢谢分享!让我进一步认识了标准文档流

谢谢分享!让我进一步认识了标准文档流

按你这个说法,那最后总结应该是:文档流=标准文档流+文本流吧,这样才符合w3c标准的定义

查看全部评论