在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、为父元素或者子元素声明绝对定位