常用清除浮動的幾個方法

浮動是我們在平時布局時經常用到的一種方式，不過也是以而帶來一些問題，比如浮動會造成浮動元素的父元素高度“坍塌”的問題，那麼這篇文章就來介紹幾種常用的解決由浮動帶來的一些問題。

浮動造成的父元素高度“坍塌”

<style>
        .container{
            background: #2aabd2;
        }
        .fl{
            float: left;
        }
        .item{
            background: #a6d5ec;
        }
    </style>

<div class="container">
  <div class="fl item">我設定了float:left，向左浮動，我的父元素沒有高度了。</div>
</div>
           

效果如下：

可以看到盒模型中的高度是0

• 給父元素設定一個固定高度：

code:

<style>
        .container{
            background: #2aabd2;
        }
        .fl{
            float: left;
        }
        .item{
            background: #a6d5ec;
        }
        .height50{
            height: 50px;
        }
    </style>
<div class="container height50">
  <div class="fl item">我設定了float:left，向左浮動，我的父元素設定了固定高度50px。</div>
</div>
           

原理：浮動子元素不能撐開父元素的高度，那麼手動設定父元素的高度自然就解決了這個問題。

優點：簡單易懂，代碼簡單。

缺點：僅在父元素固定高度的時候可用。

• 結尾添加空div标簽再利用clear這個屬性。

code:

<style>
        .container{
            background: #2aabd2;
            width: 1000px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .item{
            background: #a6d5ec;
            border: 1px solid red;
        }
        .clear{
            clear: both;
        }
    </style>
<div class="container">
  <div class="fl item">我設定了float:left，向左浮動</div>
  <div class="fl item">我設定了float:right，向右浮動</div>
  <div class="clear"></div>

</div>
           

可以看到結尾添加了一個空的div标簽設定clear:both,那麼父元素的高度自然也就有了，這兒需要注意，這裡的空标簽div需要加在這個container的最後一個，先讓浮動浮起來，不然若是将這個clear元素放在前面的話，那左右兩邊就不能浮動了。

比如如下所示：

<div class="container">
  <div class="fl item">我設定了float:left，向左浮動</div>
    <div class="clear"></div>
    <div class="fl item">我設定了float:right，向右浮動</div>
 
</div>
           

這兒将空标簽div放在了中間，那麼右邊的浮動div是會換行的，因為clear:both不準他的兩側有浮動元素。而左浮動元素的是在.clear元素之前解析的。需要注意。

原理：添加一個空标簽div，然後利用clear這個屬性的特點清除浮動，讓父元素獲得高度。

優點：比較簡單，浏覽器支援好，不容易出現毛病。

缺點：需要手動添加一個空标簽，不太好，要是浮動多的話，會出現很多不需要的結構。解析這些結構也是需要花費性能的

• 用僞元素:after

這種方法是第二種方法的進化版。方法二說了要在容器的最後手動添加一個空标簽，我麼可以利用為元素的特點來幫助我們實作自動添加空白元素然後實作清楚浮動的特點，效果如下所示：

<style>
        .container{
            background: #2aabd2;
            width: 1000px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .item{
            background: #a6d5ec;
            border: 1px solid red;
        }
        .cf:after{
            content:"";
            visibility:hidden;
            height:0;
            display:block;
            clear:both;
        }
    </style>
<div class="container cf">
  <div class="fl item">我設定了float:left，向左浮動</div>
  <div class="fl item">我設定了float:right，向右浮動</div>
</div>
           

優點：相容性好，一般都會采用這個方式來清除浮動，也不會有榮譽的dom結構。

缺點：可能就是代碼樣式略多了一點吧。

• 利用BFC布局的特點來清除子元素的浮動

    有關BFC布局，我在另一篇文章中有詳細的說明，在這兒就不在贅述BFC的知識了，有需要了解的小夥伴可以移駕：  http://blog.csdn.net/weixin_38080573/article/details/79360324

原理：BFC能夠根據子元素來自适應高度，即便這個子元素是浮動元素。

優點：也比較優雅，是解決浮動的一個好方法

缺點：可能需要對BFC有一定的了解。

其實這個也很簡單，我們隻需要知道BFC布局有這個能夠根據子元素來自适應高度，即便這個子元素是浮動元素特點，那麼接下來我們隻需要想着如何觸發容器的BFC布局就好了，那圍繞着觸發容器的BFC又可以衍生出N中方法來清除浮動，其實背後的原理都是利用BFC的可以閉合子元素浮動的特點罷了。

效果如下所示：

<style>
        .container{
            background: #2aabd2;
            width: 1000px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .item{
            background: #a6d5ec;
            border: 1px solid red;
        }
        
        .bf{
            overflow: hidden;
        }
    </style>
           

<div class="container bfc">
  <div class="fl item">我設定了float:left，向左浮動，但是我父元素觸發了BFC布局</div>
  <div class="fl item">我設定了float:right，向右浮動，但是我父元素觸發了BFC布局</div>
</div>      

好了，這邊文章總結了可以清除浮動的幾種方法，各有優缺，大家可以按需求選擇使用，不過一般常用的還是第三種比較常用。