清除浮動

清除浮動

浮動元素會脫離文檔流，使得行內元素環繞它的效果，可是它也會形成父元素塌陷、元素重疊的問題，因此這個時候就須要清除浮動帶來的影響。清除浮動的方法主要有三種：

以這段代碼爲例：

<div class="content">
    <div class="a"></div>
    <div class="b"></div>
    這裏面是一段文字效果
</div>
<style>
    .a, .b{
        width:50px;
        height:100px;
        border: 1px solid green;
    }
    .a{
        float:left;
    }
    .b{
        float:right;
    }
    .content{
        width:100%;
        border:1px solid pink;
        clear:both;
    }
</style>

上面的代碼中，因爲a、b脫離文檔流並分別位於content的兩側，而此時content的高度僅僅只是文字的高度，這是由於a、b兩個元素浮動形成了父元素塌陷，那麼消除浮動帶來的影響呢？

1. div+clear

   在content內加一個div的空白元素以下：

   <div class="content">
       <div class="a"></div>
       <div class="b"></div>
       這裏面是一段文字效果
    <div class="clearfix"></div>
   </div>
   <style>
       .clearfix{
           clear:both;
       }
   </style>

2. 僞元素+clear

   .content:after{
       content: '';
       display: block;
       clear: both;
   }

3. BFC原理

   將content聲明爲BFC

   .content{
       overflow: hidden;
   }