关于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，那么在项目的不同应用中就可以使用不同的方法来清除浮动了。