css外容器margin問題[IE中height:100%]

常用的二列布局,外容器Div定義class為container, 包含class分別為left 和main兩個子DIV,下邊是class為foot的Div

當我們想在container和foot之間加一點間隙時,fifefox卻發起了脾氣
代碼如下:

<! 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" >
.container{}{border:1px #333 solid; width:600px; margin-bottom:20px;}
.container .left{}{width:300px; float:left; height:100px; background:#f60;}
.container .right{}{width:300px; float:left; height:300px; background:#ccc;}
.foot{}{clear:both;width:600px;height:20px; background:#3D78B6;border:1px solid #000000;}
</ style >
</ head >
< body >
< div  class ="container" >
       < div  class ="left" ></ div >
     < div  class ="right" ></ div >
</ div >
< div  class ="foot" ></ div >
</ body >
</ html >

以上代碼在IE6中能正常顯示,但是在firefox中container和footer之間沒有間隙,也就是說margin-bottom:20沒起作用
解決變法:
修改container,代碼如下:

.container {} {overflow:hidden;border:1px #333 solid; width:600px; margin-bottom:20px;}

區別就在這一句