CSS子元素浮动导致父元素高度塌陷问题

       根据W3C标准，在页面中元素都有一个隐含的属性叫做 Block Formatting Context，简称 BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启元素的BFC以后，元素会具有以下特性：

   1.父元素的垂直外边距不会和子元素重叠

   2.开启 BFC 的元素不会被浮动元素覆盖

   3.开启 BFC 的元素可以包含浮动的子元素

如何开启元素的BFC？

   1.设置元素浮动 （使用这种方式开启 BFC 虽然可以撑开父元素，但是会导致父元素的宽度丢失，同事也会导致父元素下边的元素上移，不能解决此问题）

   2.设置元素的绝对定位

   3.设置元素的 display 属性设置为 inline-block （可以解决此问题，但是会导致宽度丢失，不推荐使用这种方式）

   4.将元素的 overflow 属性设置为一个非 visible 的值

注：IE6中没有 BFC，但是有另外一个隐含的属性叫做 hasLayout，该属性的作用和 BFC 类似，可以通过开启 hasLayout 来解决此问题，开启方式很多，选一个副作用最小的，直接将元素的 zoom 设置成 1 即可