5.3 图文混排
一个普通的网页，最常见的排版方式就是图文混排，文字说明主题，图像显示新闻情境，二者结合起来相得益彰。本节将介绍图片和文字的排版方式。
5.3.1 案例6——设置文字环绕效果
在网页中进行排版时，可以将文字设置成环绕图片的形式，即文字环绕。文字环绕应用非常广泛，如果再配合背景可以达到绚丽的效果。
在CSS3中，可以使用float属性定义该效果。float属性主要定义元素在哪个方向浮动。一般情况下这个属性总应用于图像，使文本围绕在图像周围，有时它也可以定义其他元素浮动。浮动元素会生成一个块级框，而不管它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
float语法格式如下所示。
float : none | left |right
提示
其中，none表示默认值，对象不漂浮，left表示文本流向对象的右边，right表示文本流向对象的左边。
【例5.6】（案例文件：ch05\5.6.html）
<!DOCTYPE html>
<html>
<head>
<title>文字环绕</title>
<style>
img{
max-width:120px;
float:left;
}
</style>
</head>
<body>
<p>
可爱的向日葵。
<img src="03.jpg">
向日葵，别名太阳花，是菊科向日葵属的植物。因花序随太阳转动而得名。一年生植物，高1~3米，
茎直立，粗壮，圆形多棱角，被白色粗硬毛，性喜温暖，耐旱，能产果实葵花籽。原产北美洲，主要分
布在我国东北、西北和华北地区，世界各地均有栽培!
向日葵，1年生草本，高1.0～3.5米，对于杂交品种也有半米高的。茎直立，粗壮，圆形多棱角，为
白色粗硬毛。叶通常互生，形状卵形或卵圆形，尖端锐突或渐尖，有基出3脉，边缘具粗锯齿，两面粗
糙，被毛，有长柄。头状花序，极大，直径10~30厘米，单生于茎顶或枝端，常下倾。总苞片多层，
叶质，覆瓦状排列，被长硬毛，夏季开花，花序边缘生黄色的舌状花，不结实。花序中部为两性的管状
花，棕色或紫色，结实。瘦果，倒卵形或卵状长圆形，稍扁压，果皮木质化，灰色或黑色，俗称葵花
籽。性喜温暖，耐旱。
</p>
</body>
</html>
在IE 11.0浏览器中浏览效果如图5-6所示，可以看到图片被文字所环绕，并在文字的左方显示。如果将float属性的值设置为right，其图片会在文字右方显示并环绕。
图5-6 文字环绕效果
5.3.2 案例7——设置图片与文字的间距
如果需要设置图片和文字之间的距离，即与文字之间存在一定间距，不是紧紧地环绕，可以使用CSS3中的padding属性来设置。
padding属性主要用来在一个声明中设置所有内边距属性，即可以设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
其语法格式如下所示。
padding : padding-top | padding-right | padding-bottom | padding-left
其参数值padding-top用来设置距离顶部的内边距；padding-right用来设置距离右侧的内边距；padding-bottom用来设置距离底部的内边距；padding-left用来设置距离左侧的内边距。
【例5.7】（案例文件：ch05\5.7.html）
<!DOCTYPE html>
<html>
<head>
<title>文字环绕</title>
<style>
img{
max-width:120px;
float:left;
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
}
</style>
</head>
<body>
<p>
可爱的向日葵。
<img src="03.jpg">
向日葵，别名太阳花，是菊科向日葵属的植物。因花序随太阳转动而得名。一年生植物，高1~3米，
茎直立，粗壮，圆形多棱角，被白色粗硬毛，性喜温暖，耐旱，能产果实葵花籽。原产北美洲，主要分
布在我国东北、西北和华北地区，世界各地均有栽培!
向日葵，1年生草本，高1.0～3.5米，对于杂交品种也有半米高的。茎直立，粗壮，圆形多棱角，为
白色粗硬毛。叶通常互生，形状卵形或卵圆形，尖端锐突或渐尖，有基出3脉，边缘具粗锯齿，两面粗
糙，被毛，有长柄。头状花序，极大，直径10~30厘米，单生于茎顶或枝端，常下倾。总苞片多层，
叶质，覆瓦状排列，被长硬毛，夏季开花，花序边缘生黄色的舌状花，不结实。花序中部为两性的管状
花，棕色或紫色，结实。瘦果，倒卵形或卵状长圆形，稍扁压，果皮木质化，灰色或黑色，俗称葵花
籽。性喜温暖，耐旱。
</p>
</body>
</html>
在IE 11.0浏览器中浏览效果如图5-7所示，可以看到图片被文字所环绕，并且文字和图片右边间距为50像素，上下各为10像素。
图5-7 设置图片和文字边距