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

posted @ 2014-02-19 11:21  dtdxrk  阅读(821)  评论(0)  编辑  收藏  举报