1.伪类解决margin-top塌陷:

如果两个不浮动的盒子相互嵌套,对内部的盒子设置margin-top会导致属性被自动转移到外部的盒子上,导致内部盒子的margin-top设置失败最靠谱的解决方式是为父元素添加一个伪类:

/*伪类解决margin-top塌陷*/.clearfix:before{    content:"";    display: table;
}

解决margin-top塌陷

html>
    
    
    


    


    

2.浮动子元素动态改变父元素宽度:

在设计网页布局时,为了便于快速布局,会将子元素设为浮动元素,父元素宽度设为固定,高度不设置,这样随着子元素的添加,父元素的高度就会动态变化,但尴尬的是,浮动子元素并不能"撑开父元素的高度",于是为父元素增加伪类便成了解决这种尴尬局面最好的方式;

.clearfix:after{    content: "";    display: table;    clear:both;
}

子元素动态改变父元素尺寸

html>
    
    

    

    

    
    

    

小结:

以上两种情况极其常见,解决方式也很类似,所以可对两种方式做一个封装:

.clearfix:before, .clearfix:after{    content: "";    display: table;
}.clearfix:after{    clear:both;
}/*适配非主流浏览器(IE浏览器)*/.clearfix{    zoom:1;

}

以后遇到上面两种问题,只要将 小结 中的源码引入到对应的css(层叠样式表),最后在父元素class属性中 中引入clearfix即可

reset.css

h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{    /*去掉默认样式*/
    margin: 0;    padding: 0;
}ul,ol{    /*去掉左边的点或者数字*/
    list-style: none;
}a{    /*去掉下划线*/
    text-decoration: none;
}em,i{    /*去掉斜体*/
    font-style: normal;
}b,strong{    /*去掉加粗*/
    font-weight: normal;
}/*清除浮动影响 和清除margintop塌陷 合在一起的写法*/.clearfix:before,.clearfix:after{    content: "";    display: table;
}.clearfix:after{    clear: both;
}.clearfix{    /*兼容ie*/
    zoom:1;
}