在CSS中，可以使用float属性，利用浮动来实现图文环绕效果。浮动（float）产生的最根本的原因是为了实现文字环绕效果。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
属性值：
left：元素向左浮动。
right：元素向右浮动。
none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit：规定应该从父元素继承 float 属性的值。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.f {
float: left;
}
div {
width: 320px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div>
<img class="f" src="http://how2j.cn/example.gif" />
<p>
当图片浮动时，文字围绕着图片。当图片浮动时，文字围绕着图片。当图片浮动时，文字围绕着图片。
当图片浮动时，文字围绕着图片。当图片浮动时，文字围绕着图片。当图片浮动时，文字围绕着图片。
</p>
</div>
</body>
</html>效果图：
更多前端开发知识，请查阅 HTML中文网 ！！
以上就是css图文环绕怎么搞？的详细内容，更多请关注0133技术站其它相关文章！
