形象理解文档流？

什么是文档流？

      很多人一定听过文档流这个概念，那么css中的的"流"是什么呢？“流"实际上是csss当中的一种基本定位和布局机制，就是浏览器默认的排版方式。
      如何更加形象的理解"流”？我们可以 结合现实生活，div标签和span标签就是容器中的水和木头，div标签会水平铺满容器，完全利用容器的空间，因为水具有流动性，span标签就是木头，浮在水的上面。


      注(以上对于流的形象理解来自张鑫旭的书籍《csss世界》)
      常见脱离文档流就是绝对定位和浮动。例如，我们有三个div标签，他们默认的排列方式是这样的。

当我们给div1设置一个左浮动，这时候页面就会变成这样。

当div1向左浮动时，他脱离了文档流，不再占据空间，实际上他就是覆盖了div2,因此我们看不到红色背景的div2。总结出来就是，float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。