CSS文字环绕图片的例子

<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;
}

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; }