/*
    當兩個容器巢狀時,如果外層容器和內層容器之間**沒有別的元素**,ff或chrome會把內層元素的margin-top作用於父元素。
     解決方案一：給父div新增overflow:hidden
     解決方案二：給父div或子div新增padding-top:100px;但是這兩種佈局有不同之處
     解決方案三：使用浮動來解決，即將子層程式碼改為：margin-top:200px;float:left
     解決方案四：給父div寫個空字串 ,此時相當於外層和內層容器之間添加了文字元素
            */
            * {
                margin:0
 
;
                padding:0;
            }

            .father {
                width:300px;
                height:300px;
                background-color:green;
                padding-top:100px;
                /*overflow:hidden;*/
            }

            .son {
                width:100px;
                height:100
 
px;
                background-color:red;
            }

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