前言
在使用DIV+CSS样式布局时,经常会使用使用一些属性对标签进行控制,比如:float属性和position属性,本文将详细讲解float属性的基础用法和清除方法,希望能对大家有所帮助,不足之处还望海涵。
float的应用
一、定义浮动的语法格式:选择器{float:属性值}
其中float常用的属性值有left、right、none,分别代表标签左浮动,右浮动,不浮动(默认值),下面将结合一个简单的实例来分别介绍三种属性。
1.不浮动(none)
如果将float设置为none(默认值),box1、box2、box3将采用从上到下的顺序依次进行排序,如图所示:
2.左浮动(left)
如果将float设置为left,box1、box2、box3将脱离标准文档流,在页面的左端,从左到右并列在一行进行排序,如图所示:
3.右浮动(right)
如果将float设置为right,box1、box2、box3将脱离标准文档流,在页面的由端,从右到左并列在一行进行排序,如图所示:
float的清除
上面我们已经学习了float的使用方法,但是以免浮动对其它标签产生影响,下面我们再介绍几种float的清除方法供大家使用。
一、clear标签清除浮动
为了方便效果的展示,我们先在中添加一段文字,如图
从图中我们可以看出,目前产生了图文混排的排版,这并不是我们想要的效果,下面我们在p标签中的css样式中添加clear属性来清除浮动效果,如图所示:
二.特殊的浮动清除
上文中clear属性虽然可以清除浮动,但需要注意的是clear属性只能清除左右两侧的浮动影响,但我们在制作网页的过程中经常会受到一些特殊浮动的影响,例如在子标签设置浮动时,如果不指定父标签的的高度,则clear属性就不能清除浮动带来的影响,如下图:
可以看出,父元素由于没有设置高度变成了一条直线,使用clear标签并不能清除浮动带来的影响,为了能更轻松的清除一些特殊的浮动,博主总结了三种方法供大家参考
1.空标签清除浮动(不推荐使用)
空标签清除浮动是指在浮动标签之后加入空标签,并对该标签应用“clear:both”样式,来清除浮动的影响,但不推荐使用(增加了毫无意义的标签)
2.overflow属性清除浮动(推荐使用)
对需要清除浮动的标签应用“overflow:hidden;”的样式也可以清除浮动对标签的影,还可以弥补空标签清除浮动带来的不足,既方便又快捷,如图所示:
3.after伪元素清除浮动(推荐使用)
除了以上两种方法外,使用伪元素也可以清除浮动,如图所示:
但需要注意的是:
1.该方法只适用于IE8以上的浏览器版本和其它非IE浏览器
2.必须为需要清除浮动的标签伪对象设置“height:0”样式,否则该标签会比实际高出若干像素
3.必须设置conntent属性,属性只可以为空。
以上有关float属性的应用与清除已经全部讲解完了,你学会了么?赶紧来试试吧!