1.浮动（float）

语法：

float：none|left|right

说明：

（1）该属性的值表示对象是否浮动及如何浮动。

（2）参数none为对象不浮动，left为对象浮在左边，right为对象浮在右边。

（3）浮动属性能将一个对象周围用文字包裹，不仅能包裹图像、表格，还能包裹整块的文字。例如：

div｛clear：left｝

img｛float：right｝

下面例子的标题文字为向左浮动，而本段内容则包裹在标题文字的右下边，就像是用文字包裹图像时的效果。

h4｛float：left｝

如果浮动要素周围的边距太小，可以使用前面介绍的空格填充属性加大四周的空间。

【例7-13】漂浮对象示例。

本例需要在当前文件夹下存有3个图片文件：police.bmp、tangseng.bmp和Block-RContent.jpg，在编辑窗口输入下面的代码：

＜！--文件名：ex7-13.html--＞

＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml"＞

＜head＞

＜meta http-equiv="Content-Type"content="text/html；charset=gb2312"/＞

＜title＞漂浮对象示例＜/title＞

＜link rel="stylesheet"href="ex7-13.css"type="text/css"/＞

＜/head＞

＜body＞

＜div＞＜h2＞幽默＜/h2＞(www.daowen.com)

＜img id="f_left"src="police.bmp"alt="浮在左边"/＞

＜p＞一把坚实的大锁挂在大门上，一根铁杆费了九牛二虎之力，还是无法将它撬开。钥匙来了，他瘦小的身子钻进锁孔，只轻轻一转，大锁就“啪”地一声打开了。铁杆奇怪地问：“为什么我费了那么大力气也打不开，而你却轻而易举地就把它打开了呢？”钥匙说：“因为我最了解他的心。”（每个人的心，都像上了锁的大门，任你再粗的铁棒也撬不开。唯有关怀，才能把自己变成一只细腻的钥匙，进入别人的心中，了解别人）＜/p＞

＜img id="f_right"src="tangseng.bmp"alt="浮在右边"/＞

＜p＞父子二人经过五星级饭店门口，看到一辆十分豪华的进口轿车。儿子不屑地对他的父亲说：“坐这种车的人，肚子里一定没有学问！”父亲则轻描淡写地回答：“说这种话的人，口袋里一定没有钱！”（注：你对事情的看法，是不是也反映出你内心真正的态度？）＜/p＞

＜/div＞

＜/body＞

＜/html＞

/*文件名：ex7-13.css*/

h2｛text-align：center｝

div｛width：700px；height：300px；padding：50px；background-image：url（"BlockRContent.jpg"）｝

p｛text-indent：3em；font-size：11pt｝

#f_left｛float：left；background-color：#e6e6fa｝

#f_right｛float：right；background-color：#e6e6fa｝

在浏览器中显示效果如图7-16所示。

图7-16　漂浮对象

2.清除（clear）

语法：

clear：none|left|right|both

说明：

（1）该属性的值表示不允许有浮动对象的边。

（2）参数none允许两边都可以有浮动对象，both不允许有浮动对象，left不允许左边有浮动对象，right不允许右边有浮动对象。

例如：如果想使一段文字包裹某一对象，而下一段文字不包裹，可以使用clear属性。

p｛clear：left｝