html margin-top 不起作用

今天在做页面的时候，出现了一个问题，



代码如下:

<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道：由于主要采用电气牵引，而且轮轨摩擦阻力较小，与公共...</dd>
</dl>
<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道：由于主要采用电气牵引，而且轮轨摩擦阻力较小，与公共...</dd>
</dl>
<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道：由于主要采用电气牵引，而且轮轨摩擦阻力较小，与公共...</dd>
</dl>
<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道：由于主要采用电气牵引，而且轮轨摩擦阻力较小，与公共...</dd>
</dl>
<div class="footer">
<span class="product">产品中心</span>
</div>css 如下
dl{
width:210px;
float:left;
margin-left:20px;

margin-right:20px;
height:184px;

}

dl dd{
font-size:12px;
color:#4a4a4a;

line-height:24px;

}

.footer{
clear:left;
margin-top:50px;
height:250px;

background-color:#e5e5e5;
overflow:hidden;

}

明明footer有margin-top，但就是不起作用

最后经过百度，发现，说当有两个div时，当上面的div浮动时，下面的div没有浮动，即使第下面的div除了浮动，但是margin-top依然没有作用

有两种解释

一、在css2.1中，水平的margin不会折叠，垂直margin可能会在一些盒模型中被折叠

二、当第一个层浮动，第二个没浮动层的margin会被压缩

解决的思路：要浮动一起浮动，要不就一起不浮动

解决办法:

1、给下面的div加上float属性

2、在上面的div和下面的div之间加一个这样的div <div style="clear:both;"></div>