.clearfix的原理和总结

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

对此感兴趣的朋友，看看idc笔记做的技术笔记。
一，什么是.clearfix很多网站都讲到
文章正文

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

对此感兴趣的朋友，看看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的原理和总结的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇Python yield 用法功能实例下一篇php 解决date时间相差8小时示例

作者：喵哥笔记

IDC笔记

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