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;
        }

添加事後的效果：