[CSS]CSS浮动float详解（二）：使用float

来源：互联网发布：java时间格式hhmmssnnn 编辑：程序博客网时间：2024/04/29 10:16

阅读前请看 [CSS]CSS浮动float详解（一）：标准文档流

通过上一篇的学习中我们发现：所有元素都处于标准流之中，元素之底部始终对齐，顶部则高矮不一，实在是不怎么美观。
在一段文字中插入一个图片，就会出现如下效果：

这里写图片描述

如果图片多了会这样：

这里写图片描述

所以傲娇的工程师们发现这样的显示实在是太蛋t了，如果这样就好了：

这里写图片描述

这就是大名鼎鼎的文字环绕效果。

工程师们又发现，实现文字环绕效果必须脱离标准文档流，因为只要处于标准文档流中，文字和图片的底部就必然处于同一个水平线上。那么问题来了，什么叫做脱离标准文档流呢？其实所谓的脱离文档流是相对于文档流而言的，不处于文档流之中即不遵循标准文档流的规则的，都属于脱离文档流。

float属性

为了脱离文档流，就有了float属性。这个属性的名字就很有意思，float是漂浮的意思，漂浮在标准文档流之上，不受标准文档流的控制。并且形象的说明了这个属性的带来的效果。

脱离文档流的表现一：脱离文档流后元素漂浮在文档流之上
float属性开启一个新的流位于漂浮在文档流之上，从而达到脱离文档流的效果。如图：

    <style type="text/css">    *{        margin: 0;        padding: 0;    }        .div1{            float: left;                width: 100px;            height: 100px;            background-color: skyblue;        }        .div2{            width: 200px;            height: 200px;            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>