BFC清除浮動

BFC 就是清除浮動 用來處理文檔脫離文檔流的問題

清除浮動的方法：

  a、父元素也添加一個浮動

     產生弊端就是：margin 不能使用

  b、給父元素添加一個:display:inline-block

      弊端同a同樣：沒法使用margin

  c、給父元素添加高

      弊端：擴展性很差，咱們沒法隨意再添加元素

  d、 br標籤

     做用換行
     弊端：把不符合w3c的規範：結構樣式行爲三者分離。因此不是很推薦
    
  e、clear樣式：規定元素的那一側不容許其餘元素浮動
 
  f、僞類清浮動
     .clear:after{
     content:"";//給元素添加一個空的內容
     display:block;//讓這個空的元素成爲一個塊元素;
     clear:both;//再讓這個元素旁邊兩側都不容許浮動
   
   }//after這個僞類ie六、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>