在CSS开发中,经常会遇到这样的问题,比如一个DIV里面有个子DIV,我们给子div设置了margin-top的值为50px,但是等你看效果的时候,才发现,父元素也跟着margin-top了50px,但是父元素与子元素之间的margin确没有任何变化。如图:

代码如下:
header {
width: 100%;
background: rgba(214,237,255,0.3);
height: 200px;
}
header h1 {
width: 100%;
text-align: center;
color: #666;
margin-top: 50px;
}
解决办法:
直接在父元素上增加overflow: hidden;属性即可。
我在网上看到还有以下几个方法,但是我没有尝试,大家可以去尝试下:
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素或者子元素声明浮动(float:left;可用)
3、为父元素添加border(border:1px solid transparent可用)
4、为父元素或者子元素声明绝对定位