css图片+文字浮动（文字包围效果）

css图片+文字浮动（文字包围效果）:

在网页中，咱们有时想实现这个效果，可是

<div id="test">
    <img src="gdimages/01.jpg" alt=""/>《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》是QST青软实训推出的“在实践中成长”系列丛书之一，做者郭全友已从事计算机教学和项目开发多年，拥有丰富的教学和实践经验。
    本书做为Web前端设计教材，由浅入深系统地讲解了HTML基本标签、表格与框架、CSS页面布局、JavaScript基本语法、JavaScript对象、BOM与DOM编程、HTML 5新特性、jQuery框架以及自定义插件。且对每一个知识点都进行了深刻分析，针对知识点在语法、示例、代码及任务实现上进行阶梯式层层强化，让读者对知识点从入门到灵活运用一步一步脚踏实地进行。
    本书的特点是采用一个“Q- Walking Fashion E&S漫步时尚广场”项目，将全部章节重点技术进行贯穿，每章项目代码会层层迭代不断完善，最终造成一个完整的系统。经过贯穿项目以点连线、多线成面，使得读者可以快速理解并掌握各项重点知识，全面提升分析问题、解决问题以及动手编码的能力本书《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》 [1]  深刻介绍了Web前端设计相关的各类技术，内容涵盖HTML基本标签、表格与框架、CSS页面布局、JavaScript基本语法、JavaScript对象、BOM和DOM编程、HTML五、jQuery框架以及自定义插件。
    本书在HTML5章节中对HTML5的一些新特性进行全面介绍，包括HTML5+CSS3页面布局、Canvas绘图、多媒体播放、Web存储、本地数据库和Web Worker等技术；在jQuery章节中的代码均适用于jQuery 1.x和2.x两个版本。书中全部代码都是基于IE 十一、Chrome和FireFox浏览器调试运行。
    本书由浅入深对Web前端基础内容进行了系统讲解，而且重点突出、强调动手操做能力，以一个项目贯穿全部章节的任务实现，使得读者可以快速理解并掌握各项重点知识，全面提升分析问题、解决问题以及动手编码的能力。随着HTML 5和ECMAScript 6的正式发布，大量的前端业务逻辑极大地增长了前端的代码量，前端代码的模块化、按需加载和依赖管理势在必行，所以Web前端愈来愈被人们重视。本书做为Web前端设计教材，由浅入深系统地讲解了HTML基本标签、表格与框架、CSS页面布局、JavaScript基本语法、JavaScript对象、BOM与DOM编程、HTML 5新特性、jQuery框架以及自定义插件。且对每一个知识点都进行了深刻分析，针对知识点在语法、示例、代码及任务实现上进行阶梯式层层强化，让读者对知识点从入门到灵活运用一步一步脚踏实地进行。
</div>

当咱们这样写事后，会出现这样一个效果：

这显然不是咱们所想要的结果，不过咱们只要加一个图片浮动就能够实现这样的效果：

<style>
        img{
            float: left;
        }
    </style>

这样就会实现上面的那种效果，文字包围效果。

若是咱们把中文所有换成英文，咱们会发现，并不会出现这样的效果，而是会这样：

这是为何呢？

　　其实这是由于英文之家没有空格，浏览器将其看做一个单词，因此就会出现这样的效果：

这样咱们只要在样式中添加一个word-break:break-all;就能够实现了

#test{
            word-wrap: break-word;
        }

添加事后的效果：