什么是浮动，如何应用浮动

在说float（浮动）之前应该让大家了解下什么是浮动，其实浮动这个属性在没有被清除浮动之前它在文档流里面表现出来的现象就像我们生活中的河流或者大海，里面有水有鱼有各种沉积物比如船啊什么的，我们可以把鱼、水、和沉船都看成我们前端的文档流里面的元素，那么如果其中鱼自然死亡会从水里漂浮在水面上，那么之前鱼在水中所占的位置就会被水填充，并且鱼会随着水流向下游飘去。那么这个现象就好似前端页面元素的浮动，浮动的元素脱离了原有的文档流，但是又没有完全脱离，暂且可以理解为脱离了半个文档流，那么下面的元素就会自动填充浮动元素之前所占有的空间，如果我们的文档流足够的长那么在拖动文档流的时候这个浮动的元素仍然会跟随文档流被拖动，这就是浮动。这么解释相信大家也应该对浮动有了初步的了解，但是在开发过程中我们其实并不希望浮动元素之前所占有的位置被其他元素所填充因为布局的需要，那么我们就要清除浮动，下面我们用代码给大家解释一下：

.box2{
　　width:60px;
　　height:100px;
　　background:blue;
}

.box3{
　　width:60px;
　　height:100px;
　　background:yellow;
}

　　

　　

　　

上图所示就是我们上段代码在浏览器中的样子是没有应用浮动的，现在我们要给box1,box2,box3增加浮动属性请看下面的样式代码及图例

.box1{
width:60px;
height:100px;
background:red;
float:left;
}

.box2{
width:60px;
height:100px;
background:blue;
float:left;
}

.box3{
width:60px;
height:100px;
background:yellow;
float:left;
}　　
现在给这三个div都加上了浮动属性下图为在浏览器中的样子：

技术分享图片

我们发现原本给warp设置的背景颜色看不到了，因为我们给warp这个div里面的元素都设置了浮动属性，他们脱离了warp的文档流并且warp有没有增加清除浮动的属性，所以现在的warp高度是0，我们自然看不到它的背景颜色。那么现在就介绍几种清除浮动的方法：

1、给应用浮动元素的父级增加高度属性：

.warp{
width:100px;
height:300px;
background:greenyellow;
}
父级div手动定义height，就解决了父级div无法自动获取到高度的问题，但是这种限制了兼容性的问题，而且子元素高度必须和父元素一样，不然会出错。

2、给应用浮动元素的父级增加overflow: hidden;属性：

.warp{
width:100px;
height:auto;
overflow: hidden;
background:greenyellow;
}
使用overflow:hidden时，浏览器会自动检查浮动区域的高度 ，不能和position配合使用，因为超出的尺寸的会被隐藏。

3、在浮动元素的同级增加一个新的空标签并设置如下样式：

增加样式：
.clearfloat{
clear: both;
}

html结构代码：

其余代码样式不变 添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度，但是这种方法如果页面浮动布局多，就要增加很多空div，会使html代码非常复杂。建议简单页面使用。

4、伪类清除浮动：

增加样式如下：
.clearfloat:after{
display: block;
clear: both;
content: “”;
}
.clearfloat{
zoom:1;
}

给浮动元素的父级增加.clearfloat的class名称：

这种方法推荐使用，代码少，理解性强，可以写在公共样式中作为通用样式。一开始我也是死记硬背的，慢慢一点点的你就理解原理了。至于：after和zoom前者是高版本浏览器兼容，后者是针对于低版本浏览器（主要针对IE7及以下）。