.clearfix的原理和总结

这篇文章主要为大家详细介绍了.clearfix的原理和总结，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编罗X来看看吧。

一，什么是.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以达到目的……

本文来自：http://www.512pic.com/175/1700-0.html

注：关于.clearfix的原理和总结的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：clearfix