浮动与定位

最新推荐文章于 2024-10-30 16:25:45 发布

weixin_51671677

最新推荐文章于 2024-10-30 16:25:45 发布

阅读量147

点赞数 1

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

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

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

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

二、使用方法

1.绝对定位语法格式

2.使用float定位。

 3.使用clear清除浮动。

总结

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

一、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三个属性值。

（1）定义：在一个模块上添加浮动会使模块脱离文档流，使其不再占用文档的位置。添加浮动会使一个行内元素变成块元素。

（2）语法：

选择器{ float:属性值； }引用
属性值描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

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>