作者：文刀日月；
来源：http://www.cnblogs.com/dtdxrk/p/3555438.html
关于css清除元素浮动的方法总结（overflow clear floatfix）
在前两天的一个面试中考官问我web中清除浮动的一些css常用方法，我很轻松的答出了：
1.overflow：hidden
2.clear:both
3.floatfix类
然后问题就来了,考官接着问‘为什么overflow：hidden‘可以清除浮动?这下就把我问住了。写了这么多年css只是单纯的解决问题，但是从来没想过为什么。
看来是需要反省和认真总结一下以前的这些细节问题了，只要不明白的就要加一个‘为什么?‘
clear:both
这三种方法里最好理解的就是clear:both
<style>
#con{border: 2px dashed #ccc;padding:5px;}
div.c{width: 100px;height: 100px;background-color: green;margin-right:5px; _display: inline; float: left;color: #fff;}
</style>
<div id="con">
<div class="c">内容一</div>
<div class="c">内容二</div>
<div class="c">内容三</div>
<div style="clear:both"></div>
</div>
原理就是在父元素最后面添加一个非浮动的空div由于有clear：both属性用来清除浮动，父元素会把它包围起来，顺带手把float：left的div也一起包裹起来，高度不再塌陷。
这种方法不再流行的主要原因就是改变了结构添加了无用的内容。
overflow:hidden
写这篇文章的起因就是它overflow:hidden，到底为什么加入这个属性就可以清除浮动呢？我上网查了一下，文章还是挺多的‘block format content‘下面简称BFC，相关文章可以自己搜一下挺多的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#con{border: 2px dashed #ccc;padding:5px;overflow: hidden;}
#con div.c{width: 100px;height: 100px;background-color: green;margin-right:5px; _display: inline; float: left;color: #fff;}
</style>
</head>
<body>
<div id="con">
<div class="c">内容一</div>
<div class="c">内容二</div>
<div class="c">内容三</div>
</div>
</body>
</html>
添加这个属性就使父级容器形成了BFC，它有三个特性：
1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
2.BFC不会重叠浮动元素
3.BFC可以包含浮动
父级形成了BFC之后说‘清除浮动‘有点不太恰当，应该改为‘包含浮动‘。形成BFC的一些方法：
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
当然父级BFC也不是一个很好的解决方法,比如：
1.父级设置float：left会改变宽度，父级也会悬浮
2.父级设置overflow：hidden会影响绝对定位的定位的子元素显示问题
3.ie6兼容性
.floatfix
最后说现在大家都在用的floatfix类
.floatfix{*zoom:1;}
.floatfix:after{content:"";display:table;clear:both;}
.floatfix:after挺好理解的，就是在元素后面添加一个清除浮动的元素等同于<div style="clear:both"></div>，只不过这是用css来添加的。
但是IE6、7不支持a以外的伪类，所以我们再用*zoom:1用来兼容IE6、7。
在IE6、7内有个hasLayout的概念，很多bug都是由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true
- position: absolute
- float: left|right
- display: inline-block
- width: 除 “auto” 外的任意值
- height: 除 “auto” 外的任意值
- zoom: 除 “normal” 外的任意值
- writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true
最后总结
现在我们已经知道父级div什么情况可以形成BFC，ie6、7的hasLayout属性值什么时候可以形成true，那么在项目的不同应用中就可以使用不同的方法来清除浮动了。