clearfix清除浮动

一、BFC 概念

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

二、触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)
• 2.2使用BFC的其它局限
  

  上面提到使用float形成BFC的时候会使父容器的长度缩短，而且还有个重要的缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？难道要全部使用float吗？BFC的几种方式都有各自的问题，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式；display这几种方式依然没有解决低版本IE问题。
  看起来还是第一种方式比较好，可是低版本IE该怎么办呢？
  2.3hasLayout
  我们知道在IE6、7内有个hasLayout的概念，很多bug正是由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true：
  （1）position:absolute
  （2）float:left或right
  （3）display:inline-block
  （4）除"auto"外的任意值
  （5）height:除"auto"外的任意值
  （6）zoom:除"normal"外的任意值
  （7）writing-mode:tb-rl
  在IE7中使用overflow:hidden或scroll或auto也可以使hasLayout为true

  三、一个相对靠谱的解决方案
  经过上面的比较我们可以得出一个相对靠谱的解决方案
  *在IE+、现代浏览器上使用伪元素
  *在IE6、7使用hasLayout
  具体应该使用哪种方式来使元素hasLayout为true呢？相对而言zoom：1比较好因为不会造成其他影响。