今天在做頁面的時候，出現了一個問題，

程式碼如下:

<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>
 

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>