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編程、HTML5、jQuery框架以及自定義插件。 本書在HTML5章節中對HTML5的一些新特性進行全面介紹，包括HTML5+CSS3頁面布局、Canvas繪圖、多媒體播放、Web存儲、本地數據庫和Web Worker等技術；在jQuery章節中的代碼均適用於jQuery 1.x和2.x兩個版本。書中所有代碼都是基於IE 11、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; }
添加過后的效果：
