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>