怎样触发BFC清除浮动？

直接上代码：

<div class='content-box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

如上所示，当.content-box的盒子不设置高度时，如果.item都是设置为display:float;则.content-box的高度将丢失掉，如果想要保存大盒子的高度，只有触发BFC。

方法一:float 的值不为 none

.content-box{
    float:left;
}

方法二：给父div加上一个确定的高度

.content-box{
    height:300px;
}

方法三： position 的值不为 static 或 relative 中的任何一个

.content-box{
    position:fixed;
}

方法四：display 的值为 table-cell、table-caption 和 inline-block 之一

.content-box{
    display:inline-box;
}

方法五： overflow 的值不为 visible；

.content-box{
    overflow:hiden;
}

方法六： float 的值不为 none；

.content-box{
    float:;
}

方法七： 目前最常用的，虚拟元素；

.content-box:after,
.content-box:before
{
    content:"";
    display:table;
}
.content-box:after{
    clear:both
}
/*:before在这里和清除浮动无关，但是可以消除上下两个magin边距重叠问题*/