margin top重叠问题

转自： http://www.51res.net/html/2003/0402/1182.html

html代码： 

复制代码 代码如下: 
<div class="box1"> 
<div class="box2"></div> 
</div> 

css样式： 

复制代码 代码如下: 
.box1{height:200px;width:200px;background:gray;} 
.box2{height:100px;width:100px;background:gold;margin-top:50px;} 

解决方法： 
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 
2、为父元素添加overflow：hidden；样式即可（完美） 
3、为父元素或者子元素声明浮动（float：left；可用） 
4、为父元素添加border（border:1px solid transparent可用） 
5、为父元素或者子元素声明绝对定位