学习笔记--html/css

    <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
     -->