CSS清除浮动

引出问题：

<style type="text/css">
     .inner { 
          float: right; 
     } 
</style> 

<div class="outer"> 
    <img class="inner" src="/images/ilta.png"> 
    <div class="inner">这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面!</div> 
</div>

这里没有给最外层的div 设置高度，如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：

1. 背景不能显示
2. 边框不能撑开
3. margin 设置值不能正确显示 (padding不会受影响)

1. 使用额外标签法

<style type="text/css">
     .inner { 
          float: right; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
    <div class="clearfix"></div>
</div>

这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

2.使用 :after 为元素

<style type="text/css">
       .inner { 
            float: right; 
       }
        .clearfix:after{  /*最简方式*/
            content: '';
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: '';
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
</style>

<div class="outer clearfix"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

原理：他是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

其中clear:both;指清除所有浮动；content: '.';display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

3. 利用 overflow:hidden 属性

<style type="text/css">
       .outer{
            overflow: hidden;
            zoom: 1;/*兼容 IE*/
        }

       .inner { 
            float: right; 
       }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好，其他区别我就说不上了，也不浪费时间。

4. 父元素浮动

当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到

<style type="text/css">
       .outer{
            float: left; 
        }

       .inner { 
            float: left; 
       }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若处于正常文档流，会被跌在底下。

如果要解决可以参考前面的办法。

<style type="text/css">
     .outer{
          float: left; 
     }
     .inner { 
          float: left; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>
<div class="clearfix"></div>

5. 父元素处于绝对定位

<style type="text/css">
     .outer{
          position: absolute;
     }
     .inner { 
          float: left; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>
<div class="clearfix"></div>

与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。

摘自：  清除浮动（clearfix hack）  

           CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？   

           浅谈 CSS 清除浮动的 6 种方法