在网站建设时使用float属性来实现图片的文字环绕，另外，除了float属性以外，再配合使用padding属性和margin属性，使图片和文字达到一种最佳的效果。float属性在网页设计中的作用是使对象产生浮动，其语法如下：

{float:left|right|none;}

float属性共有3个值，其作用分别如下。   

•none：默认值，对象不浮动。   

•left：左浮动，对象向其父元素的左侧仅靠。   

•right：右浮动，对象向其父元素的右侧仅靠。

【示例1】新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义两个类样式。

body {    font-family: "宋体";    

font-size: 14px;    

text-align: center;    

color: #000066;}.container {    

width: 600px;                /*容器container的宽度*/    

margin: 20px auto 0 auto;    /*container四周边界，左右值为auto，实现居中显示*/    

padding: 20px 10px;          /*容器container的内边距*/    

border: #990000 1px solid;   /*容器container的边框*/}img {    border: 2px #009966 solid;   /*图片的边框*/    

float: left;                 /*图片的左浮动*/    width: 150px;                /*图片的宽度*/}p {    l

ine-height: 2em;            /*行间距*/    text-align: left;            /*左对齐*/    

text-indent: 2em;            /*首行缩进*/}

然后在<body>标签中输入代码，并应用上面的类样式。

<div class="container">    

<h1>北湖诗韵</h1>    

<p>可是熏风吹来的季节？秋是蓝色的。蓝的苍穹，蓝的泥土，蓝的微风……。静谧、清凛的早晨，是你最妩媚的时刻；清丽世界，蓝的柔情，轻轻簇拥着你，像流溢着蓝色秋思的明眸，深邃、沉静。什么时候，燃烧的云霞迸现了。

<img src="images/1.jpg" alt=""    />你羞涩的面庞，透出淡淡的红晕，而后来又隐去了。你不喜欢浓妆艳抹，你不钟爱飘渺的烟云？尽管它一度那么诱人，你却重新找回了宁静；像一幅泼墨如云的画卷，天与湖的组合，风与情的融汇，蓝色太浓，太多。远处，一群孩童在船上嬉戏，还撑起了荷叶的小伞；博大的蓝色锦绣，瞬间缀上几点绿色的希冀，于是，你心底流出一首诗，很长很长；关于童年，关于绚丽的梦幻……        阿波罗—不是你爱恋许久的太阳神么？你却等它升到了极点，才坦露出那环抱你的、蓊郁的绿树；那篱笆或栅栏似的苇丛，那依稀点缀的苦江草。南面那巍巍的影子，是黄山、白山……。四周淡淡的雾气笼罩着，或银灰、米黄，或淡青、浅蓝。在映日荷花安葬的地方，亭亭的荷叶依然伫立着，几多深情，几多眷念。那荷叶编织的屏障后面，却传来喁喁私语，萧萧瑟瑟，触动了你多情的心弦，于是，你心底飘来一首歌，很美很美；关于初恋，关于大自然……</p>

</div>

在浏览器中预览。本例中运用了float:left使图片移至页面左边，从而文字在右边环绕。

【示例2】在示例1中，可以看到文字紧紧环绕在图片周围，如果希望图片本身与文字有一定的距离，只需要给img元素添加padding和margin属性即可，将示例1中的img元素做如下修改：

img {    border: 2px #009966 solid;         /*图片的边框*/    

float: left;                       /*图片的左浮动*/    

width: 150px;                      /*图片的宽度*/    

padding: 10px;    

margin: 10px;}

在浏览器中预览，可以看到图片的边框离文字有10px的距离，这是由于在网页设计时添加了margin:10px语句，而图片的边框离图片也有10px的内边距，这是由于添加了padding:10px语句。这样设置使文字与图片的距离明显变远，显示效果更佳。至于margin和padding属性的详细用法，在后面的章节中会陆续提到。