BFC 就是清除浮动 用来处理文档脱离文档流的问题
清除浮动的方法：
a、父元素也添加一个浮动
产生弊端就是：margin 不能使用
b、给父元素添加一个:display:inline-block
弊端同a一样：无法使用margin
c、给父元素添加高
弊端：扩展性不好，我们无法随意再添加元素
d、 br标签
作用换行
弊端：把不符合w3c的规范：结构样式行为三者分离。所以不是很推荐
e、clear样式：规定元素的那一侧不允许其他元素浮动
f、伪类清浮动
.clear:after{
content:"";//给元素添加一个空的内容
display:block;//让这个空的元素成为一个块元素;
clear:both;//再让这个元素旁边两侧都不允许浮动
}//after这个伪类ie6、7不兼容，ie8及以上才可以
clear{
zoom:1;
}
温馨提示：目前主流方法；
clear:left;
clear:right;
clear:both;推荐使用
clear:one;
例如：
<div id="box" class="clear">
<span class="1"></span>
<span class="1"></span>
<span class="1"></span>
<span class="1"></span>
<span class="1"></span>
<br clear="all"/>
</div>