一张网页中不仅有引起修饰作用的背景图片，还有含有具体意义的代表内容的图片，称为内容图，内容图的调用就不再是css样式中的背景属性实现了，而是用xhtml中的 img标签。图文混排的页面效果一般出现在介绍性的内容部分或者新闻内容部分，处理的方式也很简单。下面是xhtml结构代码：

<div class="pic_news">
 <img src="images/pic.jpg" alt="" />
 <p>内容信息</p>
 <p>内容信息</p>
 <p>内容信息</p>
</div>

如何设置图片的属性，将其控制到内容区域的左上角，具体设置如下：

<style type="text/css">
.pic_news {
 width:600px; /* 控制内容区域的宽度，根据实际情况考虑，也可以不需要 */
}
.pic_news img {
 float:left; /* 使图片旁边的文字产生浮动效果 */
 margin-right:5px;
}
.pic_news p {
 display:inline; /* 取消段落p标签的块属性 */
}
</style>

简单的几句css就实现了图文混排，其中重点就是将图片设置为浮动，在css样式中，我们是将图片的css样式设置为浮动，并添加margin与文字产生间隙，对于这样的图文混排效果是不是还可以用定位直接将图片放在内容区域的左上角呢？
使用position:absolute可以简单的将图片放在某个位置，但在图文混排中却不能这么做，原因如下：
图文混排的效果一般出现在介绍性的内容页面或新闻内容页面，而这些页面在一般情况下不是在页面制作过程中实现的，而是在后期网站发布后通过网站的新闻发布系统发布内容的，这样的内容发布模式对图片大小，段落出现，文字排版都是不可控制的，不能因为图文混排而增加后期发布的工作量。
使用绝对定位后，图片将脱离文档流，成为页面中具有层叠效果的一个元素，将会覆盖文字。