css 关于外边距合并的问题

也是在做项目的时候遇到的问题，解决之后记录下,问题如下：
子元素为父元素的直接子元素时，子元素的margin-top会作用的父元素上

    <div style="width:500px; height:300px; background-color: red;">
        <div style="width:250px; height:150px; background-color: blue; margin-top:150px"></div>
    </div>

解决办法:

1.父元素设置为absolute…..这就将父元素脱离文档流了,子元素的margin自然不会影响

2.父元素下面加一个空的table标签,或者是display:table的标签

3.将子元素的margin转换为父元素的padding

4.为父元素加上边框

不积跬步无以至千里