宏观地讲，我们的web页面的制作，是个“流”，必须从上而下，像“织毛衣”。
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：超脱！脱离标准流！
浮动是css里面布局用的最多的属性。
现在有两个div，分别设置宽高。我们知道，它们的效果如下：
此时，如果给这两个div增加一个浮动属性，比如float: left;，效果如下：
这就达到了浮动的效果。此时，两个元素并排了。（这在标准流中，不能实现）。
浮动想学好，一定要知道四个性质。接下来讲一讲。
性质1：浮动的元素脱标
脱标即脱离标准流。我们来看一个例子。
上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个<div>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列。
性质2：浮动的元素互相贴靠
我们来看一个例子就明白了。
我们给三个div均设置了float: left;属性之后，然后设置宽高。可以看到div的贴靠效果：
性质3：浮动的元素有“字围”效果
来看一张图就明白了。我们让div浮动，p不浮动
上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。
性质4：收缩
收缩：一个浮动的元素，如果没有设置宽高，那么将自动收缩为内容的宽高（这点非常像行内元素）。
div设置宽高：
div不设置宽高：
上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩
至此，在单独使用浮动时的一些特点就结束啦！！！当然，实际开发时，更多是浮动后带来的问题，我们下次再细说。
【逆战】