.clearfix的原理和总结

内容摘要
这篇文章主要为大家详细介绍了.clearfix的原理和总结，具有一定的参考价值，有喜欢html的小伙伴可以来参考一下。
文章正文

这篇文章主要为大家详细介绍了.clearfix的原理和总结，有喜欢html的小伙伴可以来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。

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

注：关于.clearfix的原理和总结的内容就先介绍到这里
代码注释
上一篇:after伪类应用的简单示例下一篇把自定义样式应用到HTML 5中的range元素实现方法

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！