float 究竟有没有脱离文档流,为什么文字会围绕在float元素周围,而块状元素依然会忽略floa 财富值77

2016-10-17 08:33发布

float 究竟有没有脱离文档流,为什么文字会围绕在float元素周围,而块状元素依然会忽略float元素?

付费偷看设置
发送
10条回答
夜猫1 - 这个人很懒,什么都没留下
1楼 · 2016-10-17 09:02.采纳回答

刚学习到这一部分,本来是来搜答案的,结果发现这个问题我应该尝试答一发。

块级元素和行内元素:会跟随环绕,把标准文档流的空间填充满。

第二个案例中,你把文字去掉的,所以你看不到文字环绕,它其实也是环绕的。你把文字注释了,所以这个DIV是没有内容的,只显示了底层的背景颜色。

有什么不对的地方请大家指正。

float并没有完全脱离文档流,完全脱离文档流的是position,关于float的讲解,推荐你看看张鑫旭的CSS float浮动的深入研究、详解及拓展

这个问题的第一个案例中,你用DIV包裹了行内元素,不管是块元素还是行内元素,都是会跟随环绕前面的元素(float会占用标准文档流的空间)。

关于float,题主可以看看我之前总结的这篇文章~
深入解析float

题主这里是不能用两个不完全一样的文档来验证问题的。第一个案例有文字,第二个没有,所以你是看不到有没有环绕的。

刚学到这里,我自己也是有很多问题,然后逐个验证了。

行内块元素:不会环绕。如果标准文档流的空间足够的话,行内块元素就能跟随前面的元素。如果空间不够,会另起新行。比如文档宽度是800px,里面有个左浮动的div是400px,此时如果行内块元素是400px的话就可以填充,如果是401px或以上宽度就就另起一行。