margin-top为何不起作用
<!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=utf-8" />
<title>周末疯狂购</title>
<style type="text/css">
body{margin:0 auto;padding:0; font-size:12px; font-family:"宋体";}
h1,h2,h3,ul,li,img,p{margin:0; padding:0; border:0; list-style:none;}
.clear{clear:both;}
.wrapper{width:990px; margin:0 auto;}
.top{width:990px; height:56px; margin:0 auto; background-color:#f44b47;}
.top h1{height:56px; line-height:56px; text-align:center; font-size:32.63px; color:#fff; font-weight:bold;}
.top h1 span{color:#fae855;}
.hezi{width:990px; margin:0 auto; margin-top:12px;}
/*第一部分*/
.hezi ul{}
.hezi ul li{}
.hezi ul li.tishi{width:323px; border:1px solid #ccc; float:left; margin-right:7px; overflow:hidden;}
.hezi ul li.tishi .ting{height:87px;}
.ting .left{padding-left:4px;float:left; width:70px; height:80px; margin-top:4px;}
.ting .left img{width:70px; height:80px;}
.ting .right{float:left;margin-left:6px; width:237px;height:71px; background:url(images/2.jpg) no-repeat; margin-top:11px;}
.tishi .zu{height:33px; line-height:33px;background:#e1e1e1; margin-top:3px; }
.zu h3{text-align:center; font-size:14px; color:#000;}
.tishi .tupian{padding-top:10px; height:182px;}
.tishi .tupian img{padding:0 80px; height:182px;}
.tishi .dibu{margin-top:3px;padding-left:10px; padding-bottom:8px;}
.dibu button{float:right; width:140px; height:60px; line-height:60px; font-size:21.78px; color:#60490c;background:#ffce4d; margin-right:6px;}
.dibu span.spec1{display:inline-block; float:left;margin-top:5px; background:url(images/5.jpg) no-repeat; text-align:right; width:147px; height:30px; line-height:30px; font-size:28px; font-weight:bold; color:#682121;}
.dibu span.spec2{font-size:14px; color:#909090; display:inline-block; font-weight:bold; margin-top:7px;}
/*第二部分开始*/
.main{margin-top:42px;}
.main-top{height:54px;}
.main-top ul{}
.main-top ul li{float:left;}
.main-top ul li.one{background:url(images/7.jpg) no-repeat; width:93px; height:50px;}
.main-top ul li.two{width:804px; background:#ee2f2c; height:50px;}
.main-top ul li.three{background:url(images/8.jpg) no-repeat; width:93px; height:50px;}
</style>
</head>
<body>
<div class="wrapper>
<div class="top">
<h1>周末每晚<span>8</span>点特惠秒杀</h1>
</div>
<!--第一部分开始-->
<div class="hezi">
<ul>
<li class="tishi clear">
<div class="ting clear">
<div class="left"><img src="images/1.jpg"></div>
<div class="right"><h3>2013-03-06</h3><span>倒计时</span></div>
</div>
<div class="zu">
<h3>专业方程式特护修纹眼霜15ml</h3>
</div>
<div class="tupian">
<img src="images/4.jpg" alt="margin-top为何不起作用,该如何解决">
</div>
<div class="zu">
<h3>限量1000件，每人限购5件</h3>
</div>
<div class="dibu clear">
<button>按原价购买</button>
<span class="spec1">10.99元</span>
<br/>
<span class="spec2">原价：100元</span>
</div>
</li>
<li class="tishi">
<div class="ting clear">
<div class="left"><img src="images/1.jpg"></div>
<div class="right"><h3>2013-03-06</h3><span>倒计时</span></div>
</div>
<div class="zu">
<h3>专业方程式特护修纹眼霜15ml</h3>
</div>
<div class="tupian">
<img src="images/4.jpg" alt="margin-top为何不起作用,该如何解决">
</div>
<div class="zu">
<h3>限量1000件，每人限购5件</h3>
</div>
<div class="dibu clear">
<button>按原价购买</button>
<span class="spec1">10.99元</span>
<br/>
<span class="spec2">原价：100元</span>
</div>
</li>
<li class="tishi" style="margin-right:0;">
<div class="ting clear">
<div class="left"><img src="images/1.jpg"></div>
<div class="right"><h3>2013-03-06</h3><span>倒计时</span></div>
</div>
<div class="zu">
<h3>专业方程式特护修纹眼霜15ml</h3>
</div>
<div class="tupian">
<img src="images/4.jpg" alt="margin-top为何不起作用,该如何解决">
</div>
<div class="zu">
<h3>限量1000件，每人限购5件</h3>
</div>
<div class="dibu clear">
<button>按原价购买</button>
<span class="spec1">10.99元</span>
<br/>
<span class="spec2">原价：100元</span>
</div>
</li>
</ul>
</div>
<!--第一部分结束-->
<div class="main">
<div class="main-top">
<ul class="clear">
<li class="one">12345</li>
<li class="two">67890</li>
<li class="three">111213</li>
</ul>
</div>
</div>
</div>
</body>
</html>
出来后的页面是这个样子的：
[解决办法]
.hezi这个class所在的div元素，它的子元素都是浮动的，你在这个元素内没有清理浮动，所以.hezi这个元素是没有占据空间的。
.hezi这个里面加上个{overflow:hidden;}清理浮动，试试看。
