京东静态页面第三天
有时候在我们布局的时候，不方便给父盒子设置高度，父盒子的高度是靠子盒的高度撑起来的，但是如果子盒子浮动了之后 ，父盒子的高度就变为0了，就相当于在标准流中没有位置了。
本质其实就是相当于给父盒设置属性，让父盒子感知到子盒子的具体高度，来消除浮动对后面元素的影响。
内容塌陷(父盒子高度为0，靠子盒子撑起来的，如果子盒子浮动起来后，父盒子会发生内容塌陷的问题)。
清除浮动的方式：
- 给父盒子单独的设置高度(很少用)
- clear: both;
- Overflow: hidden; 触发底层的BFC模式，也达达清除浮动的模式
- 单伪元素或是双伪元素清除浮动
.clearfix:before, .clearfix:after {
/*清除浮动，最好最标准的写法*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}
1.1 定位的层级问题
定位(相对，绝对，固定)的元素都有一个层级的概念。
只有定位的元素才有层级，浮动或是标准流的元素都没有层级。
如果定位了的元素，默认的情况下，层级都是0，而且相邻的相同定位的元素，如果在同一个位置显示的话，后面的元素会压住前面的元素。如果想让当前元素在后面的元素之上显示，这个时候需要设置z-index: 取值范围在0--9999;
注意，尽量使用正整数，不要使用负数。
定位了的元素，如果不设置trbl，默认会在原位以标准流的形式显示。
1.2 透明度 opacity
Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明
background: rgba(0,0,0,.3);
仅让背景色透明，内容不透明
1.3 相邻元素的层级(仿淘宝的效果)
<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 {
border-color: red;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
浙公网安备 33010602011771号