网页布局中margin-top失效，解决办法

项目开发中，想要要实现如下布局，但是我们发现直接设置子元素的margin-top属性，其会作用于父元素，垂直方向的margin值通常会叠加。

解决方案有以下三种：

• 给父元素设置 overflow：hidden
• 给父元素设置 border值，除none以外的值
• 考虑用padding来实现如上布局。

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

.father {  
  box-sizing: border-box;    
  width: 300px;    
  height: 300px;    
  margin: 10px auto;    
  background: burlywood;    
  overflow: hidden;    
  /* border: 1px solid white; */    
  /* padding-top: 10px; */}
  .son {    
  box-sizing: border-box;    
  width: 100px;   
  height: 100px;    
  background: cornflowerblue;    
  margin: 10px auto;