在css中文字环绕图片方法很简单只要定义img的float或img的父级div为float即可斛了，下面来看两个例子吧。
文字环绕是Microsoft Office Word软件的一种排版方式，主要用于设置Word文档中的图片、文本框、自选图形、剪贴画、艺术字等对象与文字之间的位置关系。一般包括四周型、紧密型、衬于文字下方、浮于文字上方、上下型、穿越型等多种文字环绕方式。
但我们做网页布局时，有时也需要这样的样式，那么怎么办呢？其实是很简单的，主要就是float的使用，具体请看下面例子：
HTML部分：
代码如下
复制代码
<div class="txt">
<p>
前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5
年，是指Web前端开发工程师的简称。 Web前端开发是从美工演变而来的，名称上有很明显的时代特征。
在互联网的演化进程中，Web 1.0时代，
<img src="1.jpg" alt="This is a pic"/>
网站的主要内容都是静态的，用户使用网站的行为也以浏览为主2005年以后，互联网进入Web 2.0时代，
各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一
的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，
这些都是基于前端技术实现的。
</p>
<p>
随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML
和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的
网站进行了重构。
</p>
</div>
CSS部分：
* {
margin: 0;
padding: 0;
}
.txt {
margin: 50px auto;
width: 500px;
padding: 10px;
border: 1px solid #ccc;
font: 14px/20px "Microsoft YaHei";
color: #666;
}
.txt p {
text-indent: 20px;
}
.txt img {
float: left;
width: 180px;
height: 110px;
margin: 5px 10px 0 0;
}
ok,运行后的效果就是这样子的：
例子
代码如下
复制代码
HTML代码如下：
<div class="wrap_area">
<img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />
<div class="shape_wrap">
<div style="width: 250px;"></div>
<div style="width: 280px;"></div>
<div style="width: 305px;"></div>
.
.
.
</div>
<p>Numerous blocks of text</p>
.
.
.
</div>
CSS代码大致如下：
div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }
div.shape_wrap div { float: left; clear: left; height: 20px; }
CSS掌握的不错的同学们应该就已经知道其中的奥妙了，同样是利用 float 将div 部分内容提出文档流，然后用div的堆砌造出一条正文要通过的路径。
