float属性及影响

float属性的英文名是漂浮的意思,那么该属性的作用会使得拥有该属性的模块漂浮在第二层.

为什么要使用float:

使用最多的情况即使用于div排版(并不是只能用于div排版).div本身是一个块,默认占据了一行的位置,如果接下来再写一个块,会默认换行实现.而我们如果想实现两个div在一行的效果,就要使用float.

float拥有两个属性:left和right.left的作用为漂浮并向左对齐,right的作用也如是.

以下为代码及效果图:

<html>
	<head>
	</head>
	<body>
		<div style="width:300px;height:300px;background-color:black;float:left;"></div>
		<div style="width:200px;height:400px;background-color:pink;float:left;"></div>
		<div style="width:500px;height:500px;background-color:green;float:left;"></div>
	</body>
</html>

 可是float属性又有时带给你麻烦!

因为漂浮属性,相当于此时页面分为了两层.漂浮的模块会覆盖底层的模块,而底层的模块因为上层模块的漂浮,自身的位置也会受到影响.初学前端的朋友也经常因此感到烦恼.

我们来举一个例子. 

最开始我三个div属性都无float属性:

黑色模块赋予float属性:

此时我们观察到粉色模块变短了很多! 

可是它不是消失了,是被覆盖了.当我们将黑色模块漂浮在第二层后,第一层则为空白.而因为粉色模块和绿色模块都处于第一层,对于它们来说,当它们的上方出现了空白,代码又没有其他修饰的话,代码会默认作用于最开始的空白区域.因此粉色和绿色模块一起往上平移黑色模块的高度.

若想恢复到三个div模块顺序垂直排列的效果的话,有以下三个方法:

  1. 取消黑色模块div属性
  2. 将粉色模块进行位置修饰,往下挪移
  3. 使用clear属性清除float的影响

注意:这种影响并不意味着没有任何好处可言,具体使用视情况而定. 

 

float属性的另外一种影响在我的这篇博客中有介绍 :https://blog.csdn.net/qq_36470686/article/details/82864510

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值