【初级-个人理解】float是否脱离普通流？是否占据空间？以及浮动对内联和块元素的影响。

 注：本文纯属个人理解。

        First: “文档流”是，在css里面的定义是  normal flow（普通流）

         链接（英文）：https://www.w3.org/TR/CSS21/visuren.html

         链接（中文引用博客链接）：http://blog.csdn.net/winnersong/article/details/1379324

      question 01：什么是普通流 （normal flow）？

               首先，我们知道一个完整的网页即html文件是由众多的标签搭建形成的，标签在元素类型上分为如下三种。

                    块级元素：独占一行，可设置 width 和 height  属性。

                    内联元素：紧随前面的元素从左至右依次排列直到这一行的空间排满才会换行，不可设置 width 和 height  属性。

                    内联块级元素：从左至右依次排列，可设置 width 和 height  属性。

                    讲到这里，普通流也差不多描述出来，普通流实则是标签在html中的排列方式——块级元素独占一行垂直排列，内联元素在行内从左至右依次排列

      Start：

                  按照所了解的float会脱离普通流，脱离后占不占空间的问题。 PS：（黑色边框为父div1，灰色区域div2，红色区域div3，img）

                 首先，我们需要了解的是。float这个属性出现的目的是为了实现文字环绕图片的效果；其次，通常讲的脱离普通流的说法是准确的，我个人认为。单从float属性             的目的来讲，实现的就是文字环绕的效果，如果从这点来讲毫无疑问是浮动后占据原来空间的，我们知道元素可分为三类下面我们会分别展开讨论。 BUT 下面的例子中           我们会看到有的情况下它又是不占据空间的 ，从下面单一的小实验总结了一下： 

               情况一（浮动占据空间）：浮动元素后紧随的标签果是 内联 或 内联块元素。

               情况二 （浮动不占据空间）：浮动元素后紧随的 是 块级元素 或者图片的时候。

01    div2:  block,  div3 :  block  , img: block

02    div2:  block float : left,   div3 :  block  , img: block

03    div2:  block float : left,   div3 :  inline-block  , img: block

    问题来了：如果说脱离了文档流，为什么当div3改成内联块元素的时候 它能自动分隔开div2 的宽度。

04    div2:  block float : left,   div3 :  inline-block margin-left:20px  , img: block

      在上面的基础上再给div3增加一个margin-left：20px； 我们会发现，这个外边距会从div2 的右边开始计算。

05   删除div3  给img 分别 设置 inline、inline-block、block，我们发现img 始终在与div2 在一行从左至右依次排列。

02    div2:  block  float : left ,   div3 :  block  , img: block