首先，什么是文档流。笔者百度了一下 说的是“文档流是文档中可显示对象在排列时所占用的位置”。在css中可以理解为元素的普通排版，就是元素在自身的特性下的基本排列（比如说块元素独占一行），从上到下，从左到右。所以文档流还可以叫做普通流，正常流。
但是通过css设置了元素的float属性以后，元素就脱离了文档流。此时可以理解为将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行排列。代码如下：
浏览器中的表现
此时div1盒子脱离了文档流，虽然看起来还是原来的位置，但是其实浮动起来了，相当于我们是以90度垂直往下看，如果我们站在水平面上面看的话会发现有div1和div2两层。可以理解为上面说的其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行排列。
但是如果我们在盒子里面加一点东西会怎么样呢。
给每一个盒子加一些文字
浏览器中的表现
可以看到并不是如我之前所说当脱离文档流的元素不存在，究竟是怎么回事呢？此时就涉及到了另外一个概念了，就是文本流。如果说文档流是相对于盒子模型来讲的，那么文档流就是相对于文字段落来讲的。此时的浮动元素的确脱离了文档流，但是并没有脱离文本流。所以文字就会环绕在浮动元素的周围了。
如果有同学学过ps，可以用ps中的图层来解释，文档流在最下面，相当于背景，浮动元素和文本元素相当于在同一个图层上面。上面的图层即挡住了下面的图层。如果要改变这种情况的话，ps可以改变图层的排列顺序解决，那么在css中如何解决呢。可以用z-index，默认的层级是1，所以只要设置比想要覆盖的元素的z-index高的就可以了。
由于本人还处在菜鸟阶段，未免会有一些错误，希望看到的同学能够指出来，笔者一定改正，不误导其他人。第一次写总结，啰嗦了一点，文笔也不行，一定会加以改正。最后，感谢阅读。
网友评论