父元素与子元素之间的margin-top问题(css hack)

html结构如下：

<div class="parents">
    <div class="son"></div>
</div>

css结构如下：

        .parents{
            height: 200px;
            width: 200px;
            background-color: gray;
        }
        .son{
            height: 100px;
            width: 100px;
            background-color: red;
            margin-top: 50px;
        }

效果如下：

父元素的位置会跟着子元素的margin-top值而变化

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