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模块顺序垂直排列的效果的话,有以下三个方法:
- 取消黑色模块div属性
- 将粉色模块进行位置修饰,往下挪移
- 使用clear属性清除float的影响
注意:这种影响并不意味着没有任何好处可言,具体使用视情况而定.