1. 程式人生 > >html margin-top 不起作用

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>