子div 的margin-top不生效

/*    当两个容器嵌套时,如果外层容器和内层容器之间**没有别的元素**,ff或chrome会把内层元素的margin-top作用于父元素。     解决方案一：给父div添加overflow:hidden     解决方案二：给父div或子div添加padding-top:100px;但是这两种布局有不同之处     解决方案三：使用浮动来解决，即将子层代码改为：margin-top:200px;float:left     解决方案四：给父div写个空字符串&nbsp;,此时相当于外层和内层容器之间添加了文本元素            */            * {                margin:0;                padding:0;            }            .father {                width:300px;                height:300px;                background-color:green;                padding-top:100px;                /*overflow:hidden;*/            }            .son {                width:100px;                height:100px;                background-color:red;            }<div class="father">    <div class="son">      </div></div>