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