1、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。
2、然后通过background给div添加一张图片作为它的背景。
3、接着可以通过url()来连接图片，url里面放置的就是背景图片的路径。
4、随意地放了一张图片用作背景，一定要注意，路径要写对。
5、这样，保存之后文字就会覆盖在图片的上面了。
<div style="float:leftbackground:#f00width:200pxheight:20px"></div><div style="float:leftbackground:#000width:200pxheight:20px"></div>
如上的代码，你会发现一个红色的div和一个黑色的div在一行显示出来。
如果去掉他们两个的float，就会显示在两行，红一行，黑一行。
如果你把第二个黑色的div里的float改为clear，即清除左浮动，他们也是两行显示，意思就是说，红色的div左浮动你的，不要影响我。
具体的应用你多玩几次就知道了。
在排版的时候，经常会要两个div并列在一行显示，这种情况就需要用float了；有时他们会影响到别的div，为了让别的div不受到影响，就需要给受到影响的div加一个clear了。
1、找到产生这种现象的原因：浮动元素自身的高度低于相邻元素的文本的高度。2、根据原因利用css样式来控制它。有2个样式可以到达效果，样式只需添加在文字上即可。
第一种通过属性overflow来控制。如：
.fixWrapper {
overflow: hidden
zoom: 1
}
第二种通过属性display来控制。
.fixWrapper {
display: table
zoom: 1
}
但是第二种方法有缺陷，如果浮动元素周围有多个元素，这种方法只有与浮动元素相邻的元素有效果。为此可以通过定义一个元素比如div，添加样式将浮动元素周围多个元素包裹起来就可以。
<div class="fixWrapper">
<ul>...</ul>
<p>...</p>
</div>
