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

Arthur_Kevin
  • 27

clipboard.png

clipboard.png

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

回复
阅读 7.2k
3 个回答
安歌
  • 6.9k
✓ 已被采纳
枫s的思念
  • 2.4k

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

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

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

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

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

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

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

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

宣传栏