彻底解决浮动引起的div不能撑开的问题，css技巧

    前端开发人员在学习别人的代码的时候肯定能经常看"

"这样的代码，但是你真的能明白它是做什么用的吗？比如：

<div style="border:2px solid red;"> 
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> 
    <div style="clear:both;"></div> 
</div>

    你可以将此部分代码放到一个HTML页面看看效果，然后在去掉"

"看一下效果,就知道这句话的作用了。

    原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

    但这种办法并不是最好的，可以通过更完美的方式实现。你只要到Google或者Baidu随便一搜"css清除浮动"，就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。.clearfix不是一个技术的代名词，而是很多人都在使用相同的方法，并且取了个相同的名字。很多大型网站是这样写的：

<style> 
.clearfix:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: "."; 
    clear: both; 
    height: 0; 
} 
* html .clearfix{zoom: 1;} 
*:first-child + html .clearfix{zoom: 1;} 
</style> 
<div class="clearfix" style="border: 2px solid red;"> 
    <div style="float: left; width: 80px; height: 80px; border: 1px solid blue;"> 
        我的网站 www.jcodecraeer.com </div> 
</div>

看完解决办法，咱们来看里边的原理：

首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。

:after伪类用来和content属性一起使用设置在对象后的内容，例如：

a:after{content``:``"(link)"``;}

这个CSS将会让a标签内的文本后边加上link文本文字。同理

.clearfix:after{  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: ".";  
    clear: both;  
    height: 0;  
}

这个css给class为clearfix的元素后面加了个文本内容为“.”,清除两边浮动，`内容不可见的块元素。也就相当于"<div style="clear:both;"></div>"。用.clearfix:after伪类的目的，仅仅是不想去写一个无意义的div在后面。如果你不觉得"<div style="clear:both;"></div>"影响代码的美观，你完全可以忽略.clearfix:after。`

但是IE不支持:after伪类。

利用"* html"这个只有IE6认识的选择符，设置缩放属性"zoom: 1;"触发hasLayout，从而使元素闭合内部的浮动。实现兼容IE6。至于什么是hasLayout，可以自己百度一下。我对hasLayout的认识就是，这是微软留给开发人员的蛋疼东西，只知道该怎么用就行了，不想去了解它。

利用"*:first-child + html"这个只有IE7认识的选择符，设置缩放属性"zoom: 1;"实现兼容IE7。