浮动小示例

浮动分为左浮动右浮动，元素如果浮动的话会脱离文档流，下面的元素会挤上去，所以当使用浮动时要记得清除浮动

浮动实例

<!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; }

这样的方式可以很好的清除浮动

猜你喜欢