.clearfix的原理和总结

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。

一，什么是.clearfix

很多网站都讲到一个盒子清除内部浮动时可以用到.clearfix。

.clearfix:after {
  content:  ;
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}

 

<div class=clearfix>
  <div class=floated></div>
</div>

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

在IE6,7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素内部插入一个clear: both的块级元素，从而达到清除浮动的作用。这时的代码相当于：

<div>
  <div class=floated></div>
  <div style=clear: both></div>
</div>

二，总结

在IE6,7下面只要是触发了hasLayout的元素就可以清除内部浮动了。而在标准浏览器下面清除元素内部浮动的方法有很多，大多数的情况下.clearfix:after都可以满足需求。除了.clearfix:after这种方式，其余的方法无非就是产生新的Block Formatting Context以达到目的……