通過CSS的浮動屬性，我們可以使圖片浮動在文本中，增加頁面的美觀性。但是，有時候圖片浮動后，文本的排版可能會出現問題。這種情況下，我們可以通過一些CSS樣式來解決。 首先，我們需要在html中加入圖片和文本的代碼。圖片可以通過img標簽插入，文本則可以放在p標簽中，如下所示：

<img src="example.jpg" style="float:left;margin-right:10px;" />
<p>這里是文本內容，圖片浮動后文本可能會被圖片覆蓋或者出現重疊的情況。</p>

接下來，我們需要添加一些樣式來解決文本被圖片覆蓋或重疊的問題。其中，最常用的方法是清除浮動。我們可以在文本后加入一個空的div，并使用clear屬性清除浮動，代碼如下：

<img src="example.jpg" style="float:left;margin-right:10px;" />
<p>這里是文本內容，圖片浮動后文本可能會被圖片覆蓋或者出現重疊的情況。</p>
<div style="clear:both;"></div>

這里的clear:both;表示清除左右浮動的元素，保證文本不會被圖片覆蓋或出現重疊。 另外，我們還可以使用CSS的overflow屬性或者偽元素:before/:after來添加一些裝飾性的字符或者空格，創建一定的間隔，防止文本和圖片的重疊。

<img src="example.jpg" style="float:left;margin-right:10px;" />
<p style="overflow:auto;">這里是文本內容，圖片浮動后可以使用overflow屬性添加滾動條，防止文本和圖片的重疊。</p>
<div style="clear:both;"></div>

如果我們想在文本后面添加一些空格或者字符，可以使用CSS的偽元素:before/:after來實現。代碼如下：

<img src="example.jpg" style="float:left;margin-right:10px;" />
<p class="text">這里是文本內容，圖片浮動后可以使用偽元素添加一些裝飾性的字符來創建一定的間隔，防止文本和圖片的重疊。</p>
<div style="clear:both;"></div>
<style>
.text:after{
content:" ";
display:block;
height:20px; /*根據需求設定合適的高度*/
clear:both;
}
</style>

通過上述幾種方法，我們可以輕松地解決圖片浮動后文本被覆蓋或出現重疊的問題，在頁面布局的時候更加靈活自如。