解决浮动脱档问题（clearfix）的常用方法

发表于 | 更新于 | 分类于 | 阅读次数：

好久没有写过技术文章了，最近回顾起以前的老知识，感觉都忘掉好多了
这回来记录一下一个凡是做网页就一定会遇到的问题吧
平时做网页处理排版的时候，经常会使用到 css 的浮动功能
但是浮动一直以来都有一个很麻烦的问题，就是元素一旦浮动就会脱离文档流
这是它的缺点，也是它的优点，为什么这么说呢？
它的缺点就缺在于在排版时会增加排版的难度
有时候需要父元素始终包裹住子元素，但是 float 脱离文档流之后父元素就不能直接包裹住子元素了
就像这样

相比 display: inline-block 它却有一个好处， 用过 inline-block 的都知道，行内块元素属于文档内节点，不脱离文档流
但是随之而来的，不脱离文档流的的情况下就很容易发生这种问题

就是一旦代码中存在换行，制表符，这些东西的话，就会被当成空白节点处理，两个元素之间总会有一个莫名其妙的间距
而 float 出来的元素就可以不用考虑空白符节点的问题
所以我还是选择了 float，那么接下来要解决的问题就是怎么让父元素包裹住 float 的元素了
现在最主流的办法就是使用 css 的 clearfix 类，就是在父元素标签的 class 属性中添加 clearfix，类似这样

1
<div class="clearfix"></div>

然后 clearfix 的写法有好多种，这里记三种常用一点的，都可以兼容 IE6 的

第一种：overflow:auto

1
2
3
4
.clearfix {
  overflow: auto;
  zoom: 1;
}

第二种：使用 after 伪元素

1
2
3
4
5
6
7
.clearfix:after { 
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}/*IE/7/6*/

第三种：display:table 与 clear:both 联用

1
2
3
4
5
6
7
8
.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1;/*IE/7/6*/
}

这样子就可以实现让父元素包裹住浮动的子元素了

参考资料：

解读浮动闭合最佳方案：clearfix
CSS - 清除浮动（clearfix hack）
What methods of ‘clearfix’ can I use?
clearfix 清除浮动进化史