相信大家许多人在刚开始做页面布局中使用float属性无法把握它产生的效果,尤其是在多个div共同放置在一个容器中,因为float属性设置而往往产生自己不想要的结果.于是在这里给大家说说float属性到底该如何使用.
- float:该属性控制目标HTML元素是否浮动以及如何浮动.当通过该属性设置某个元素浮动后,该元素将被当作block类型的盒模型处理,即相当于display属性被设置为block.也就是说,即使为浮动元素的display设置了其他属性值,该属性值依然是block.浮动HTML元素将会漂浮紧紧跟随它的前一个元素,直到遇到边框/内填充/外边距/或block类型的盒模型元素为止.
float属性可以设置两个属性值,分别是left属性值和right属性值:
- left属性值,设定方式为:
float:left;设定该属性可以使设定该属性的<div...>(其他元素也可以),向上浮上一层后靠左排列(可能这句话读者不太明白,在之后的代码演示中会让大家完全理解这句话的意思) .
- float属性值,设定方式为:
float:right;设定该属性可以使设定该属性的<div...>(其他元素也可以),向上浮上一层后靠右排列(可能这句话读者不太明白,在之后的代码演示中会让大家完全理解这句话的意思) .
当容器中有多个div时设置float属性会产生什么结果在这里我们用代码示范操作一下:
<html>
<head>
</head>
<body>
<div style="width:60px;height:60px;background-color:black;"></div>
<div style="width:120px;height:200px;background-color:pink"></div>
<div style="width:100px;height:100px;background-color:green"></div>
</body>
</html>上图是我们定义了三个不同大小的div容器,三个div都没有设置float属性,我们来看看会产生什么结果:
通过上图可以发现三个div容器因为没有设置float属性,所以三个div容器竖着排列,并不一行排放,但是在日常的页面设计中我们有时需要将多个div放在一行显示,这时就需要设置float属性来完成操作.
- 接下来,我们对黑色的div进行定义float:left;属性,看看会有什么改变:
<div style="width:60px;height:60px;background-color:black;float:left;"></div>
通过上图我们可以发现粉红色的div与黑色的div重叠在了一起,出现这种情况的原因是什么呢?这时我们再回头看前文中介绍float属性时所说的一句话 "向上浮上一层后靠左排列" 我们再通过该图来理解理解这句话,当黑色的div设置float属性后,黑色div容器向上浮动一层(一个网页是分好多层次结构的,并不是我们单一看到的平面结构,一个网页可以拥有多个平面层,类似于三维立体的表示,只不过在我们日常浏览中只能看到最上面一层,类似于一个圆锥,去求它的俯视图一样.),然后靠左对齐.当黑色的div容器离开共有的同一平面时,粉色的div和绿色的div独占一层,因为这两个div并没有设置float属性所以就继续竖着排列.
在最后,我们试着将粉色的div也设置成float:left:属性后,看看有什么变化:
<div style="width:120px;height:200px;background-color:pink;float:left;"></div>
我们可以看到因为粉色的div设置了float属性向上漂浮一层后,与黑色的div处于同一平面,并与黑色的div左对齐,但因为绿色的div并没有设置float属性与其他两个div并没有在同一平面,并且同黑色的div产生了重叠.
- 最后,关于float操作能引起的现象仍有许多,相信通过对以上float属性的掌握,大家可以以此类推出出现其他现象的原因,从而修正自己的代码,实现自己想要的结果.