通过指定css属性float的值，从而使元素向左或向右浮动，然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。
css的float属性：改变块元素对象的默认显示方式，html标签设置了float属性之后，它将不再独自占据一行，从而可以实现多个元素同处一行的效果。
使用float样式，如果没有清除浮动，那么有浮动元素的父元素容器将无法自动撑开。
如果没有清除内部浮动，此时会导致浮动的父元素无法自动撑开到本身应有的高度。
即，当一个元素是浮动的，如果没有关闭浮动时，其父元素不会包含这个浮动元素，因为此时浮动元素从文档流中脱离。
在样式定义的后面进行清除浮动，清除浮动的方法有几种：
1、clear:both清除浮动
clear清除浮动主要是借用clear属性来清除浮动，这是一种比较陈旧的清除浮动方法，但是感觉一般遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动，我们需要在需要清除浮动地方的后面紧接着增加一个额外元素，比如说一个div标签，并且定义他们的样式为“clear:both”,其通常使用的结构方式如下：
<div class="demo A">
<div class="demoB demoFloat">float left</div>
<div class="demoC demoFloat">float right</div>
<div class="demoD demoFloat">not float</div>
<div class="clear"></div>
</div>
.clear {
clear:both;/*主要使用这个属性来清除浮动*/
/*为了不让ie具有一定的空间，个人建议加上下面三个属性*/
height: 0;
line-height: 0;
font-size: 0;
}
2.使用overflow
用overflow方法来清除浮动相对来说比较简单，只需要在有浮动的元素上面加上下面的属性：
对于overflow属性清滁浮动我们还可以这样应用：
3.clearfix方法
这种方法清除浮动是现在网上最拉风的一种清除浮动，是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。
其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而clearfix利用其伪类clear:fix在元素内部增加一个类似于div.clear的效果。
具体的使用方法：
使用clearfx来清除浮动最主要掌握一点，需要在有浮动元素的父元素中加入一个叫clearfix的class名称，比如例子，需要在div.A中加入一个clearfix的class名。接着在给这个clearfix加上样式：
其实只使用clearfix:after就可以达到清除浮动的效果，但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug，所以为了让浏览器兼容这个clearfix的清除浮动，在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题。
在这么多种清除浮动的方法中，都没有离开最原始的clear:both方法，特别是clearfix:after清除浮动，完全就是clear:both的一种变身，区别在于不需要在html增加一个标签，而只需要在有浮动元素的父元素中加上一个clearfix的class名，这样就轻松解决了清除浮动的问题。