原文: https://blog.csdn.net/yiyelanxin/article/details/75006925
在一個圖文並茂的網頁上，文字環繞圖片可以使布局美觀緊湊，如何實現呢？有兩種辦法：
1.利用圖片屬性實現
代碼如下：
<p style="width:400px;"> <img src="images/bkjj.jpg" align="right" width="120" hspace="5" vspace="5"> HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局 </p>
效果圖如下：
設置標簽的屬性align="right"即可，如果想讓圖片居左，文字在右環繞，可以將align屬性設置為left，其中 vspace 表示圖片與文字的上下距離，hspace表示左右距離。
如果是兩段及以上文字環繞圖片，實現方法：
<div style="width:500px;">
<img src="images/bkjj.png" align="right" width="120" hspace="5" vspace="5" />
<p>HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局</p>
<p>第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局</p>
</div>
效果圖：
2.利用CSS屬性實現
代碼如下：
<div style="width:400px;"> <div style="float:left; clear: both;" align="center"> <img src="images/bkjj.jpg" width="120" alt="" hspace="8"><br /> 圖像標題 </div> CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局 </div>
效果圖如下：
修改float=“right” 即可實現圖片在右，文字在左環繞；修改float=“none” 即可實現圖片與其標題獨占一行，如下圖：
如果是兩段及以上文字環繞圖片，實現方法：
<div style="width: 500px;"> <div style="float: left; clear: both;" align="center"> <img src="images/bkjj.png" width="120" alt="" hspace="8"><br /> 圖像標題 </div> <p>HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局</p> <p>第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局第二段HTML文字環繞圖片布局</p> </div>
ps: float表示使文字環繞在一個元素的四周，clear表示定義某一邊是否有環繞文字。