请单击查看Demo
四、再说一说浮动元素与非浮动元素混合布局时，它们的重叠顺序：
测试源码：
<div class=”test”>
<img src=”http://www.cctv.com/travel/20040301/images/101855_1.jpg” width=”311px” height=”350px” alt=”picture” />
<h2>江南油菜花 美得华实</h2>
<p><strong>在春天的江南乡间，。。。。。。</p>
<p><strong>南国的春天，。。。。。。 </p>
<p>江南无大平原，多山，。。。。。。</p>
<p>蜜蜂在花盛期才开始出动，。。。。。。</p>
<p>在贴近京杭大运河的南浔、同里、周庄，。。。。。。</p>
<p>在江南赏油菜的最好办法，。。。。。。</p>
</div>
样式：
* { margin: 0; padding: 0; }
body { font: 12px/1.5 Verdana, Tahoma, “宋体”, sans-serif; padding: 50px; }
.test { border: 1px solid #000; margin: 50px auto; overflow: hidden; }
h2 { background: #DDD; border: 3px solid #333; }
img { float: left; margin: 10px -120px 10px 10px; }
p { text-indent: 2em; }
p strong { background: red; border: 2px solid #000; color: #FFF; }
h1, ol { color: red; }
结论：与浮动元素重叠时的布局：
行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示；
块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，只有内容在浮动元素“之上”显示。
请单击查看Demo
五、浮动元素的居中
还有就是关于浮动元素的居中问题，这里限于篇幅，不再赘述，请扩展阅读：“实现浮动后的li元素居中”以li元素的居中为例讲解如何实现浮动元素居中，推荐使用相对定位法实现。
说明：以上所述全参考《CSS权威指南》（第三版）。
