css中float、clear、z-index、overflow、百分号和像素值的用法

float: 设置元素浮动，元素浮动后就脱离了标准的放置位置，原本竖着排放的块元素会浮动的依次向左边浮动；而它后面的元素因为该元素已经浮动，脱离原来位置，而获得了该元素的标准摆放位置。如下图：

float_noclear

可以看到由于浮动导致“版权信息”获得了divs的标准放置位置，且divs依次向左靠齐。

html代码如下：

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

.divs {
	width: 200px;
	height: 200px;
	background-color: yellow;
	margin-left: 50px;
	float: left;
	margin-top: 20px;
}

#copy {
	width: 100%;
	height: 100px;
	background-color: gray;
	text-align: center;
    /*  z-index: 1;
	position: absolute;
	clear: left; */
}
</style>
</head>
<body>
	<div id="div">
		<p id="p1">我是P1</p>
		<p id="p2">我是P2</p>
	</div>

	<hr />

	<div class="divs">内容一</div>

	<div class="divs">内容二</div>

	<div class="divs">内容三</div>

	<div class="divs">内容四</div>

	<div id="copy">版权信息</div>
</body>

clear: 清除上一个元素浮动造成的影响，如果不注释clear:left; 那么可以看到清除浮动后，会把上一个元素当作标准位置，而将下一个元素放置在它应该放置的下一个块的位置。清除浮动后效果图如下：

z-index: 元素的堆叠顺序。数值越大越靠近用户，比如1比-1更加靠近用户，所以z-index=1;的会完全显示，而z-index=-1的会被遮住。

注释掉clear:left; 然后取消对position: absolute;和z-index: 1；的注释，可以发现，版权信息显示在黄色背景之上。z-index属性必须和position定位一起使用才有效。

参考：CSS z-index 属性

overflow:该属性可以设置当内容溢出块状元素的时候，是显示还是隐藏还是以滚动条等等的方式来处理。

代码如下：

/*CSS代码*/
#copy {
	width: 100%;
	height: 100px;
	background-color: gray;
	text-align: center;
	/* z-index: 1;
	position: absolute; */
	clear: left;
	
	
	overflow: hidden;
}

#copy p{
	width: 100%;
	height: 50px;
}

<!-- html代码 -->
<div id="copy">
		<p>版权信息1</p>
		<p>版权信息2</p>
		<p>版权信息3</p>
</div>

页面效果：

可以看到本该显示三个段落的，因为设置了overflow: hidden;来隐藏溢出的部分，因此第三个段落就没有显示。

下面来说说百分号和像素来指定width和height的区别：

使用百分号的时候，该百分号对应的元素会随着窗口大小的改变而改变，会自动适应窗口；而使用像素值会使其对应的元素无论窗口如何改变，都不会变大或者变小。尤其是在使用了浮动后，某些页面的浮动元素会随着窗口大小改变而跑到下一行（块），严重影响显示。因此通常推荐可以先使用像素值来指定宽高，后使用百分比来使页面元素自适应。但是这样又会导致在电脑端显示的网页正常，而运行到移动端就会变形。额。。。。通常若不指定其父元素的高度，那么使用百分比来定义该元素会无效，因为页面高度可以任意大小，不指定就不知道其百分比对应多少。但是宽度不一样，宽度通常固定为屏幕宽度。

html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	*{
		/*可以在浏览器中看到，无论页面怎么缩放，
		元素大小总是不变，这样就可以避免页面宽度变化带来的
		元素位置偏移。
		*/
		width: 1340px;
		height: 600px;
	}
	.divs{
		width: 20%;
		height: 10%;
		border: 2px dotted red;
		float: left;
		margin-left: 10px;
	}
</style>
</head>
<body>
	<div class="divs">内容一</div>
	<div class="divs">内容二</div>
	<div class="divs">内容三</div>
	<div class="divs">内容四</div>
</body>
</html>

percentage

可以看到显示并没有因为浏览器变窄而导致div向下移动。

Japathy

发布了21 篇原创文章 · 获赞 2 · 访问量 1万+

私信关注

css中float、clear、z-index、overflow、百分号和像素值的用法

猜你喜欢