css文字环绕图片—遇到的问题及快速解决方法

1. <style>            .img-left {   
2.             border: 3px solid #005588;                width:300px;   
3.         }            .img-left img {   
4.             float:left;  /* 对图片进行浮动就可以实现了  */               width:150px;   
5.         }        </style>   
6.           <div class="img-left">   
7.         <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>            这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文   
8.         <div style="clear:both;"></div>        </div>  

2）效果图

很容易就出来想要的效果了。最关键的代码：对图片进行左浮动就可以了，这不是挺简单的嘛。     

当把中间的文字替换成连续的英文字母时，出现问题了，如图

于是查找相关资料，测试结果后发现：

浏览器默认解析英文或者数字时，是按照单词进行解析。

也就是说，每个单词是一个整体，遇到空间不足时，不会对单词进行拆分。

所以才会出现上面这种情况。