浮动分为左浮动 右浮动, 元素如果浮动的话 会脱离文档流,下面的元素会挤上去,所以当使用浮动时要记得清除浮动
浮动实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,ul,h2,h3,p{margin:0;padding:0; font-family:"宋体";}
li{ list-style:none;}
img{ border:none; vertical-align:top;}
a{ text-decoration:none;}
.wrap{width:366px; background:#f4fafb;margin:30px auto;}
.head{height:23px; background:url(img2/headBg.gif) no-repeat;}
.title{ background:url(img2/titleBg.gif) no-repeat 6px 4px; line-height:22px; font-size:12px;color:#294852; padding-left:30px;}
.list{padding:0 7px 2px 5px;}
.list li{zoom:1;overflow:hidden; vertical-align:top;padding:13px 0 9px 0;}
.list .pic{width:95px;height:60px;float:left;border:1px solid #c8c4d3;padding:2px;background:#fff;}
.list .text{width:240px;float:right;}
.list h3{ line-height:24px; font-size:12px;}
.list h3 a{color:#333;}
.list p{ font-size:12px; line-height:20px;color:#666;}
.list p a{color:#666;}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<h2 class="title">外媒评论精选</h2>
</div>
<ul class="list">
<li>
<a href="#" class="pic">
<img src="img2/pic.gif" />
</a>
<div class="text">
<h3><a href="#">《加勒比海盗4》-- 商业味浓郁</a></h3>
<p>本机加勒比海盗讲述杰克船长受英王所托寻找不老泉,与他…[<a href="#">详细</a>]</p>
</div>
</li>
<li>
<a href="#" class="pic">
<img src="img2/pic.gif" />
</a>
<div class="text">
<h3><a href="#">《加勒比海盗4》-- 商业味浓郁</a></h3>
<p>本机加勒比海盗讲述杰克船长受英王所托寻找不老泉,与他…[<a href="#">详细</a>]</p>
</div>
</li>
<li>
<a href="#" class="pic">
<img src="img2/pic.gif" />
</a>
<div class="text">
<h3><a href="#">《加勒比海盗4》-- 商业味浓郁</a></h3>
<p>本机加勒比海盗讲述杰克船长受英王所托寻找不老泉,与他…[<a href="#">详细</a>]</p>
</div>
</li>
</ul>
</div>
</body>
</html>
清除浮动我们常常使用这样的方式.clear { zoom:1; }
.clear:after { content:''; display:block; clear:both; }
这样的方式可以很好的清除浮动