浮动与定位

目录
文章目录

前言

一、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>

在这里插入图片描述

3.使用clear清除浮动。

(1)清除浮动的目的是为了清除浮动元素的影响,主要为了解决父盒子高度为0时的情况。

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

(3)语法

选择器 {clear:属性值; }

属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响

总结
以上就是今天分享的内容,由于我学识浅陋,可能存在不足,还请大家多多指教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值