清除浮动和定位

最新推荐文章于 2022-10-31 23:15:39 发布

原创最新推荐文章于 2022-10-31 23:15:39 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#清除浮动和定位

前端同时被 3 个专栏收录

34 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

清除浮动

1 篇文章

订阅专栏

清除浮动

clear属性可以用于清除元素周围的浮动对元素的影响。
也就是元素不会因为上方出现了浮动元素而改变位置。
可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
none：不忽略浮动，默认值

方法一：

.clearfix:after{
	content:" ";
	display: block;
	clear: both;
	}
	.clearfix{
		zoom: 1;
	}
</head>
<body>
	<div class="box1 clearfix"><div>
	</div>
	...

方法二：

.box{
	border: 10px red solid；
	overflow; hidden;
	zoom；1；
}
</head>
<body>
	<div class="box1"></div>
		<div class="clear"></div>
	</div>
	...

方法三：

直接使用clear：both

定位

position属性可以控制Web浏览器如何以及在何处显示特定的元素。
可以使用position属性把一个元素放置到网页中的任何位置。
可选值：
static
relative
absolute
fixed

定位代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style type="text/css">
		.box1{
			height: 200px;
			background-color: red;
			position: relative;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: yellow;
			/*
			定位：
				- 定位指的就是将指定的元素摆放到页面的任意位置
					通过定位可以任意的摆放元素
				- 通过position属性来设置元素的定位
				-可选值：
					static：默认值，元素没有开启定位
					relative：开启元素的相对定位
					absolute：开启元素的绝对定位
				 	fixed：开启元素的固定定位（也是绝对定位的一种）
			*/
			/*
			当元素的position属性设置为relative时，则开启了元素的相对定位
				1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
				2.相对定位是相对于元素在文档流中原来的位置进行定位
				3.相对定位的元素不会脱离文档流
				4.相对定位会使元素提升一个层级
				5.相对定位不会改变元素的性质，块还是块，内联还是内联
			*/
			position: relative;
			/*
			当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
				left：元素相对于其定位位置的左侧偏移量
				right：元素相对于其定位位置的右侧偏移量
				top：元素相对于其定位位置的上边的偏移量
				bottom：元素相对于其定位位置下边的偏移量
			通常偏移量只需要使用两个就可以对一个元素进行定位，
			一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
			*/
			left: 100px;
			top: 200px;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
		}

		.s1{
			position: relative;
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>

	<span class="s1">我是一个span</span>
</body>
</html>