在网站建设时使用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属性的详细用法，在后面的章节中会陆续提到。
当前文章标题：设置文字环绕
当前URL：http://www.lyjtt.cn/news/wzzz/3104.html
上一篇：定义图片的横纵向对齐
下一篇：网页设计中的设计图文混排
