HTML+CSS布局之float属性的应用与清除

前言

在使用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属性的应用与清除已经全部讲解完了，你学会了么？赶紧来试试吧！