经常我们会看到html css布局中的图片和文字环绕的应用场景，这样的布局形式图文并茂，让读者在浏览页面信息的时候一目了然。
那我们今天就来根据百度百科的HTML5的某一段段落来学习一下，如何利用html css的知识来实现图文并茂的布局吧。
源代码及显示效果如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5_百度百科</title> 6 <style type="text/css"> 7 /*设置主容器的宽度和边框*/ 8 .main_para{ 9 width: 848px; 10 border: 1px solid #e5e5e5; 11 } 12 /*设置第一个div的上边距的距离*/ 13 .para_layout{ 14 margin-top:30px; 15 } 16 /*设置图片div的宽度及浮动*/ 17 .text_pic{ 18 width: 220px; 19 float: right; 20 } 21 /*设置图片的宽高及显示的样式*/ 22 img{ 23 width: 220px; 24 height: 136px; 25 display: block; 26 } 27 /*设置段落的样式*/ 28 .para{ 29 width:790px; 30 font-size: 14px; 31 word-wrap: break-word; 32 color: #333; 33 margin-bottom: 15px; 34 text-indent: 2em; 35 line-height: 24px; 36 margin-left: 30px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="main_para"> 42 <div class="para para_layout"> 43 <div class="text_pic"><img src="image/html5.jpg"></div> 44 标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</div> 45 <div class="para">HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。</div> 46 <div class="para">HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div> 47 <div class="para">2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”</div> 48 <div class="para">2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。</div> 49 <div class="para">本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。</div> 50 <div class="para">支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。</div> 51 <div class="para">在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。</div> 52 </div> 53 </body> 54 </html>
在上面的案例中，我们将要显示的图片html5.jpg放在一个div(类名：text_pic)中。
在源代码中，我们看到了，将div(类名：text_pic)设置成float:right，向右浮动。
float设计最初的主要效果和功能就是要让文本环绕图片，如果给块状元素设定float，就是文本环绕块状元素。