清除浮動

      很久沒寫博客了，果真心血來潮容易，堅持卻很難。看了下張鑫旭大神的博客，這麼厲害的人仍然堅持每週有產出，很慚愧。最近的確有些懈怠了。從軟考結束，好像就沒有一個去奮鬥的目標了，日子天然就懶散起來了。2015年還有40多天，仍是要振做起來，作一些事情。

      清除浮動，是前端很常見的一個問題。今天就來總結一下。

      法一：使用clear屬性。

<style>
    .clear{
        clear:both;
}
    .fl{
        float:left;
}
    .fr{
        float:right;
}
</style>

<div>
    <div class="fl">左浮動</div>
    <div class="fr">右浮動</div>
    <div class="clear"></div>

</div>

      顯然，最後的那個div沒有任何語義，僅僅是爲了清除浮動而寫的。這樣，真的，好嗎？

 

      法二：我在法一的基礎上改進了一下，這也是從同事那裏獲得的靈感。是的，靈感。

<style>
    .clearfix:after{
        display:block;
        content: ' ';
        height: 0;
        overflow: hidden;
        clear: both;
}
    .fl{
        float:left;
}
    .fr{
      float:right;
}
</style>
<div>
    <ul class="clearfix">
        <li class="fl">左浮動</li>
        <li class="fr">右浮動</li>
    </ul>
</div>

       使用了after僞元素，這樣就沒必要寫沒有語義的多餘的元素了。clearfix的寫法是頗有講究的，至於爲何要這麼寫，他們怎樣配合着起做用，我還不是很清楚。

 

       法三：給浮動元素的父容器添加overflow屬性。

<style>
    .of{
     /* overflow:hidden;*/
      overflow:auto;
}
    .fl{
        float:left;       
}
      .fr{
        float:right;
}
</style>

<div class="of">
    <div class="fl">左浮動</div>
    <div class="fr">右浮動</div>
</div>

　　of類中的兩句代碼均可以使用，通常推薦使用auto。

 

      綜上，清除浮動也就分了兩類。一類是添加元素，另外一類是給父容器加overflow屬性。若是父容器自己就是浮動元素，則無需額外處理，內部浮動自動清除。