• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

文档流概念

开发技术 开发技术 4小时前 3次浏览

所谓的文档流,就好比如一块块的正方形组成的一个整体,而这些正方形就代表着每个div。当某个div脱离了这个整体,也就代表他脱离了文档流。然后下一个div就会来填补脱离的div的位置。下面是流程图。
  有四个小朋友在买小卖部排队买糖吃~
文档流概念

  第一个买完了糖的小朋友脱离了排队的队伍开心的吃糖去。
文档流概念
后面的小朋友看前面的小朋友走了,连忙补上防止别人插队。

文档流概念

 文档流概念

  实际上,在html页面中,我们看到的会是这样。
 
文档流概念

  div2被div1给覆盖了!因为脱离文档流的div1不占据页面的空间了,所以才会留有空间给后面的div补上,当然这也导致了div2给div1覆盖了!

  目前常见的会影响元素脱离文档流的css属性有:
①float浮动。
②position的absolute和fixed定位。

  最后,想知道要怎么解决这种覆盖问题的童鞋可以戳这里哦~
————————————————
版权声明:本文为CSDN博主「CruellyJohn」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_40421277/article/details/79687268


程序员灯塔
转载请注明原文链接:文档流概念
喜欢 (0)