css样式重置：清除原本标签样式、margin-top塌陷

body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
    padding: 0;
    margin: 0;
}
/*让h标签继承body内设置的字体大小*/
h1,h2,h3,h4,h5,h6{
    font-size: 100%;
}
/*去掉小圆点*/
ul{
    list-style: none;
}
/*去掉文字倾斜*/
em{
    font-style: normal;
}
/*去掉下划线*/
a{
    text-decoration: none;
}
/*在ie浏览器里，被a标签包着的img标签会生成紫色边框*/
img{
    border: none;
}
 
/*清除margin-top塌陷 和 清除浮动。
给ul加class="clearfix"，可以清除ul的格式。例li  float后，内容不在ul的区域内*/
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
/*ie兼容（ie缩放）*/
.clearfix{
    zoom: 1;
}

.fl{
    float: left;
}
.fr{
    float: right;
}

引用：

<link rel="stylesheet" type="text/css" href="css/resetCSSStyle.css">

margin-top塌陷：给子容器设置margi-top，父元素高度塌陷。（当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。）

解决：给父容器加class="clearfix"样式