前端开发中的定位（position）与浮动（float）

最新推荐文章于 2023-06-22 21:20:39 发布

weixin_51671677

最新推荐文章于 2023-06-22 21:20:39 发布

阅读量1k

点赞数 9

分类专栏： HTML 文章标签： html css 定位前端

本文链接：https://blog.csdn.net/weixin_51671677/article/details/116431908

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

在网页设计过程中经常会需要对网页进行分区或切割成若干块，下面浅谈一下我个人对其中定位和浮动属性的理解。

一、css中对div布局的控制。

在css中实现div布局控制有两中方式：绝对定位和浮动。

1.绝对定位

所谓的绝对定位就是用css的position属性对布局进行控制，此属性有static、fixed、relative、absolute四个属性值。常用relative和absolute。若指定为static，div遵循HTML的默认规则；若指定为relative，可以用top、left来设置div在页面中的偏移，但此时图层不可层叠；若指定为absolute，可以用top、left对div进行绝对定位；若指定为fixed，在IE7以上与FixeFox中div的位置相对于屏幕的位置固定不动，可以说fixed属性值才是真正意义上的绝对定位。

2.浮动

浮动就是设置图层的浮动位置，此属性有left、right、none三个属性值。

3.clear

虽然clear不是真正意义上的控制div的页面布局，但是说到float属性时，不得不对它进行简短介绍。clear清除图层内浮动，与浮动属性是一对作用相反的属性。属性值可以取为：left、right、both、none，可以清除向左、向右、两边浮动或允许浮动。

二、使用方法

1.绝对定位语法格式

使用absolute属性值时，要弄清楚参照哪个容器进行布局控制，默认情况下会自动的按外层的容器进行定位，也就是说一个页面中第一次使用position属性，用top、left进行定位时，会相对与最外层的容器（body）（示例一）定位，而在图层嵌套和层叠中往往要基于某一个外层div进行定位，所以要实现这一目的，就需要参照定位的外层div添加position属性，top、left属性值可以不设，接下来就会参照这一外层的div定位（示例二）。

<!--示例一，该页面中第一次使用position属性，div2会按body进行定位-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.bor{
			border: 1px red solid;
		}
		.div1{
			width: 800px;
			height: 800px;

		}
		.div2{
			position: absolute;
			top: 1px;
			left: 30px;
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	 <div class="div1 bor">
        <div class="div2 bor">示例一</div>
    </div>
</body>
</html>

<!-- 示例二，此时参照外层容器div1进行定位 -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.bor{
			border: 1px red solid;
		}
		.div1{
			width: 800px;
			height: 800px;
			position: relative;

		}
		.div2{
			position: absolute;
			top: 1px;
			left: 30px;
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	 <div class="div1 bor">
        <div class="div2 bor">示例一</div>
    </div>
</body>
</html>

使用relative进行定位，会参照邻近的容器进行定位，relative的参照物与外层容器是否使用position无关（实例三）。

<!-- 示例三，此例中div1没有添加position属性，但div依然参照邻近的容器div1进行定位 -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.bor{
			border: 1px red solid;
		}
		.div1{
			width: 800px;
			height: 800px;
			/*position: relative;*/

		}
		.div2{
			position: relative;
			top: 1px;
			left: 30px;
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	 <div class="div1 bor">
        <div class="div2 bor">示例三</div>
    </div>
</body>
</html>

使用fixed定位就是参照屏幕进行定位，div不会因为页面的滑动而改变位置。

2.使用float定位。

使用float可以实现页面的左右浮动，浮动的参照物为父容器（实例三）。

<!-- 示例三，此时参照父容器进行浮动定位 -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.bor{
			border: 1px red solid;
		}
		.div1{
			width: 800px;
			height: 800px;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: left;
		}
		.div3{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: right;
		}
	</style>
</head>
<body>
	 <div class="div1 bor">
        <div class="div2 bor">示例三（左浮动）</div>
        <div class="div3 bor">实例三（右浮动）</div>
    </div>
</body>
</html>

3.使用clear清除浮动。

设置了clear的元素将不像前一个浮动元素对齐，换行重新开始。

总结

以上就是今天分享的内容，由于学识有限，还可能存在不足，还请指教。

weixin_51671677

关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端开发中的定位（position）与浮动（float）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言在网页设计过程中经常会需要对网页进行分区或切割成若干块，下面浅谈一下我个人对其中定位和浮动属性的理解。一、css中对div布局的控制。在css中实现div布局控制有两中方式：绝对定位和浮动。 1.绝对定位所谓的绝对定位就是用css的position属性对布局进行控制，...
复制链接

扫一扫