.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}
（一般常用伪元素的方法来清除浮动）
定位元素的层级问题：
如果只给一个元素绝对定位，而不写trbl值的话，会以原位显示
定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素，在同一个位置的话，后面的元素默认会压住前面的元素。如果同样是定位了的元素，默认他们的层级都是0，只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上，这个时候就需要改变层级的关系,用z-index来改变。
z-index的取值范围0—9999999，最好是正数，尽量不要用负数。
另外要注意，position:relative依旧会占据标准流中的位置，会导致其他内容无法在其层级上显示。
透明度opacity
Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明
background: rgba(0,0,0,.3);
仅让背景色透明，内容不透明
相邻元素的层级问题
淘宝网页中鼠标移入后边框闪现效果
XML/HTML Code复制内容到剪贴板
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 500px;
border: 10px solid blue;
float: left;
/*margin-right: 10px;*/
margin-left: -10px;
position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/
}
div:hover {
