阅读前请看 [CSS]CSS浮动float详解（一）：标准文档流
通过上一篇的学习中我们发现：所有元素都处于标准流之中，元素之底部始终对齐，顶部则高矮不一，实在是不怎么美观。
在一段文字中插入一个图片，就会出现如下效果：
如果图片多了会这样：
所以傲娇的工程师们发现这样的显示实在是太蛋t了，如果这样就好了：
这就是大名鼎鼎的文字环绕效果。
工程师们又发现，实现文字环绕效果必须脱离标准文档流，因为只要处于标准文档流中，文字和图片的底部就必然处于同一个水平线上。那么问题来了，什么叫做脱离标准文档流呢？其实所谓的脱离文档流是相对于文档流而言的，不处于文档流之中即不遵循标准文档流的规则的，都属于脱离文档流。
float属性
为了脱离文档流，就有了float属性。这个属性的名字就很有意思，float是漂浮的意思，漂浮在标准文档流之上，不受标准文档流的控制。并且形象的说明了这个属性的带来的效果。
脱离文档流的表现一：脱离文档流后元素漂浮在文档流之上
float属性开启一个新的流位于漂浮在文档流之上，从而达到脱离文档流的效果。如图：
<style type="text/css">
*{
margin: ;
padding: ;
}
.div1{
float: left;
width: px;
height: px;
background-color: skyblue;
}
.div2{
width: px;
height: px;
background-color: yellow;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
脱离文档流表现二：行内元素可以设置宽高，块级元素不再占用一行
元素脱离文档流后，元素永远都不会被文档流中的规则约束。文档流规定，行内元素无法设置宽和高，块级元素占用一行。脱离后，这个规则不再约束元素，代表着元素无论是块级元素还是行内元素，都可以设置宽和高，都可以不占用一行。
脱离文档流表现三：文本内容不会被覆盖
文本内容不会被覆盖！！！文本内容不会被覆盖！！！文本内容不会被覆盖！！！
让我们看一下文字环绕效果的代码：
div{
float: left;
background-color: yellow;
width: 200px;
height: 200px;
}
p{
background-color: red;
}
<body>
<div>
</div>
<p>文字</p>
</body>
我们将div浮动，p标签是块级标签，不浮动。按照我们的猜想，div会覆盖p标签的一部分，但是奇异的事情发生了：
我们发现，浮动的元素虽然处于文档流的上方，但是并不会遮挡文本（文字图片链接），文本会自动浮动，形成字围效果。
脱离文档流表现四：子元素不会再撑出父容器的高
因为父容器元素的高度默认为包裹子元素，当子元素浮动后，脱离文档流，子元素不再遵循文档流中的规则，也就不遵循块级元素行内元素的规则——所以子元素就不会再撑出父元素的高度。这样，父元素的高度就变为了0。如图（红色边框是父容器）：
脱离文档流表现五：脱离文档流的元素，仍然是在父元素中浮动
绿色盒子并没有完全浮动到顶部，而是浮动到父元素的顶部。所以，浮动的元素的位置仍然会收到父元素的限制，即只会在父元素的进行浮动。
float后产生的效果：
再来看一下文字环绕效果，这次我给图片加上了边框：
我们看到文字自动的向左浮动，贴在了图片的右侧。而且，第二行文字发现下发会有空隙继续漂浮在图片右侧，无论下方空隙够不够文字的高度。最后一行发现，左侧没有依靠，就自动漂浮到了最左侧，而且，他的上方有空隙，但是他并不会向上浮动填补空隙。
让我们用大图感受一下：
第二行文字发现下发会有空隙继续漂浮在图片右侧，无论下方空隙够不够文字的高度：
最后一行发现，左侧没有依靠，就自动漂浮到了最左侧，而且，他的上方有空隙，但是他并不会向上浮动填补空隙
盒子也同样遵循这个效果。