文本流、文档流和浮动流

文本流

概括地说其实就是一系列字符，是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而position属性可以将元素从文本流脱离出来显示。

文档流（常规流、普通流）

1、常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。
2、脱离文档流只有两种情况：float和绝对定位。
①浮动脱离文档流

    
    
    
    


    
"content">
        This is outofNormal content area.
      
      
normal contentnormal contentnormal contentnormal contentnormal content
      
This is normal content area.This is normal content area.This is normal content area.This is normal content area.

效果图：

如果在CSS中加入float:left; 文字就会浮动左侧，在黑色方框旁边
此时，div脱离了文档流，h2元素和p元素都定位不到div，所以顶了上来。但是其中的文字却还是定位在div的右边，说明此时脱离了文档流，并没有脱离文本流。

但是值得我们注意的是，如果一个浮动元素的上一个元素也是浮动的，那么它会跟在上一个元素的后面。

3、总结：使用float可以使元素脱离文档流而不脱离文本流（元素无视它的存在，但是元素中的文字会围绕在它周围，但是不会脱离dom树，用浏览器的审查元素就可以看到脱离文档流的元素、），而使用绝对定位可以使元素脱离文档流和文本流（元素和其中的文字都定位不到它的存在）。

三、浮动流

1、定义：①元素浮动后的位置由其浮动前在文档流中的位置决定(在文档流中是第几行，浮动后就在第几行) ②浮动后会尽量向最左侧/最后侧放置，直到遇到元素边框或者其他浮动元素

2、浮动元素字围现象：因为浮动是一种半脱离文档流的形式，元素会脱离文档流DOM，其他元素会占用它的位置。但是文字会依然为其留下位置常应用在图文排版中。

3、浮动影响：
　　脱标（脱离标准流，造成布局混乱，高度塌陷；字围（文字围绕浮动元素）；收缩（不区分行内元素与块元素）；贴边（向左或者向右）
　　
4、解决方法：一般都是通过before伪类消除浮动流

标签：：before/after{
              content:"";
              display:block;
              clear:both;
       }