清除浮动

      好久没写博客了，果然心血来潮容易，坚持却很难。看了下张鑫旭大神的博客，这么厉害的人仍然坚持每周有产出，很惭愧。最近的确有些懈怠了。从软考结束，好像就没有一个去奋斗的目标了，日子自然就懒散起来了。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属性。如果父容器本身就是浮动元素，则无需额外处理，内部浮动自动清除。