# 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后产生的效果：**
再来看一下文字环绕效果，这次我给图片加上了边框：
我们看到文字自动的向左浮动，贴在了图片的右侧。而且，第二行文字发现下发会有空隙继续漂浮在图片右侧，无论下方空隙够不够文字的高度。最后一行发现，左侧没有依靠，就自动漂浮到了最左侧，而且，他的上方有空隙，但是他并不会向上浮动填补空隙。
让我们用大图感受一下：
第二行文字发现下发会有空隙继续漂浮在图片右侧，无论下方空隙够不够文字的高度：
最后一行发现，左侧没有依靠，就自动漂浮到了最左侧，而且，他的上方有空隙，但是他并不会向上浮动填补空隙
盒子也同样遵循这个效果。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://yangsx95.gitbook.io/notes/front-end/css/css-fu-dong-float-xiang-jie-er-shi-yong-float.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.