添加环绕代码即可，代码如下：
<style>
p {border:1px solid red}
img {float:leftmargin:0 5px 5px 0}
</style>
操作步骤如下：
1、首先准备好html文件和所需要插入的图片，将其放在同一个文件夹内；
2、然后在html文件中编辑要显示的页面内容和图片，先将整体的大概页面建立好；
3、然后需要在html中添加环绕代码：
<style>
p {border:1px solid red}
img {float:leftmargin:0 5px 5px 0}
</style>
4、代码添加完毕后，保存html文件，重新打开预览就可以看到文字环绕图片的格式了。
方法/步骤
准备一张图片，新建一个空白html文件
其中html文件内容如下图所示，html中包含了一张图片，及对应的描述段落
给html添加head标签，在标签中定义样式。
<style>
p {border:1px solid red}
img {float:leftmargin:0 5px 5px 0}
</style>
用chrome浏览器打开上面的html文件，可以看到文字绕排效果，如下图所示
由于在引入图片时我们用到的语句是<img src="Penguins.jpg" style="width: 50%height:auto"/>，这表明图片的大小是会随着浏览器窗口的大小调整而自动调整的。所以当放大或缩小浏览器窗口时，环绕效果会跟随着变化。
如果要清除文字绕排效果，只需将float: letf样式定义删除即可。
html调整添加的图片与文本之间的距离方法：
方法/步骤
1、打开Dreamweaver，新建一个html文档，然后在界面的上方找到插入图片的按钮，点击插入图片。
2、插入图片后写上文字，文字在图片下方，和图片的距离比较远，这是默认的距离。
3、切换到代码模式，或者拆分模式，拆分模式的好处就是可以同时看到代码和实际效果。
4、将图片和文字对应的所有P版权都删除，包括<p>和</p>，这些标签是段落标签，dw默认段间距太宽，所以就换一种段落方式。
5、删掉了p标签之后，在文字的前端写上<br>,然后看一下效果，图片和文字的距离缩小了，
6、对于图片文字环绕效果，是在文字比较多的时候才会用到，由于新版dw的属性面板没有图片环绕方式的选项，只能从其它途径来修改了。
7、右击图片，然后选择对齐，这里有很多种对齐方式，常用的有左对齐和右对齐，左对齐就是图片在左边，文字在右边，右对齐就是文字在左边，图片在右边。这两种都是图片和文字的环绕效果。
8、选择的是左对齐，效果如图中所示。
HTML超级文本标记语言是 标准通用标记语言下的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示的网页中的各个部分。网页 文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉 浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 浏览器按顺序阅读网页 文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的 浏览器，对同一标记符可能会有不完全 相 同的解释，因而可能会有不同的显示效果。其主要特点如下：
简易性：超级文本标记语言 版本升级采用 超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加 标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然 个人计算机大行其道，但使用 MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是 万维网（ WWW）盛行的另一个原因。
通用性：另外， HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
