2016-10-17 05:26发布
float 究竟有没有脱离文档流,为什么文字会围绕在float元素周围,而块状元素依然会忽略float元素?
刚学到这里,我自己也是有很多问题,然后逐个验证了。
题主这里是不能用两个不完全一样的文档来验证问题的。第一个案例有文字,第二个没有,所以你是看不到有没有环绕的。
有什么不对的地方请大家指正。
关于float,题主可以看看我之前总结的这篇文章~ 深入解析float
float并没有完全脱离文档流,完全脱离文档流的是position,关于float的讲解,推荐你看看张鑫旭的CSS float浮动的深入研究、详解及拓展。
float
position
行内块元素:不会环绕。如果标准文档流的空间足够的话,行内块元素就能跟随前面的元素。如果空间不够,会另起新行。比如文档宽度是800px,里面有个左浮动的div是400px,此时如果行内块元素是400px的话就可以填充,如果是401px或以上宽度就就另起一行。
第二个案例中,你把文字去掉的,所以你看不到文字环绕,它其实也是环绕的。你把文字注释了,所以这个DIV是没有内容的,只显示了底层的背景颜色。
这个问题的第一个案例中,你用DIV包裹了行内元素,不管是块元素还是行内元素,都是会跟随环绕前面的元素(float会占用标准文档流的空间)。
块级元素和行内元素:会跟随环绕,把标准文档流的空间填充满。
刚学习到这一部分,本来是来搜答案的,结果发现这个问题我应该尝试答一发。
最多设置5个标签!
付费偷看金额在0.1-10元之间
刚学到这里,我自己也是有很多问题,然后逐个验证了。
题主这里是不能用两个不完全一样的文档来验证问题的。第一个案例有文字,第二个没有,所以你是看不到有没有环绕的。
有什么不对的地方请大家指正。
关于float,题主可以看看我之前总结的这篇文章~
深入解析float
float
并没有完全脱离文档流,完全脱离文档流的是position
,关于float的讲解,推荐你看看张鑫旭的CSS float浮动的深入研究、详解及拓展。行内块元素:不会环绕。如果标准文档流的空间足够的话,行内块元素就能跟随前面的元素。如果空间不够,会另起新行。比如文档宽度是800px,里面有个左浮动的div是400px,此时如果行内块元素是400px的话就可以填充,如果是401px或以上宽度就就另起一行。
第二个案例中,你把文字去掉的,所以你看不到文字环绕,它其实也是环绕的。你把文字注释了,所以这个DIV是没有内容的,只显示了底层的背景颜色。
这个问题的第一个案例中,你用DIV包裹了行内元素,不管是块元素还是行内元素,都是会跟随环绕前面的元素(float会占用标准文档流的空间)。
块级元素和行内元素:会跟随环绕,把标准文档流的空间填充满。
刚学习到这一部分,本来是来搜答案的,结果发现这个问题我应该尝试答一发。
一周热门 更多>