<div class="m1"><div class="m2"></div></div> 
    margin塌陷：在巢狀結構中，垂直方向上，子級是找不到父級的border-top，即不能相對於父級的border實現移動。
    當子級的margin-top小於父級的margin-top時，父級、子級以及子級相對於父級的位置關係不會改變
    當子級的margin-top大於父級的margin-top時，子級會帶著父級一起移動。
    整體呈現出的效果就是父級取m1與m2中大的margin-top進行移動。

    解決方案：
        1：使父級的border-top中的width>0,此時設定子級的margin-top就可以相對於父級進行移動；
        2：觸發父級的塊級格式化上下文（BFC,Block Formate Context），
        觸發的方式-》position：absolute/fixed;
                    display:inline-block;
                    float:left/right;
                    overflow:hidden;
 

    <!-- 浮動元素產生了浮動流
        所有產生了浮動流的元素，塊級元素看不到他們
        產生了BFC的元素和文字類屬性的元素（inline）以及文字元素能看到浮動元素
    

        clear:both;   清除左右的浮動流
    -->
    <!-- 
        css權重  256進位制
        !important      Infinity
        行間樣式           1000
        id                 100
        class|屬性|偽類     10
        標籤|偽元素          1
        萬用字元               0
     -->