在网页布局中，常常遇到图文混排的效果。所谓的图文混排，指的是文字环绕着图片进行布局。文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段则可以实现各种绚丽的效果。

在CSS中，我们可以使用float属性来实现文字环绕图片的效果。

语法：

float: 取值;

说明：

float属性取值只有2个，非常简单，如下表所示。

表1 float属性取值
属性值 说明
left 元素向左浮动
right 元素向右浮动

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       img{float:left;}
       p{
           font-family:"微软雅黑";
           font-size:12px;
        }
    </style>
</head>
<body>
    <img src="img/lotus.png" alt=""/>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个例子中，当我们把float:left;改为float:right;后，此时预览效果如下图所示。