清除浮动

如果使用div(或其他容器)包裹一个浮动的元素，经常会遇到一些无法包裹内部元素的问题。

这时就需要清除浮动：必须给容器(如div)定义明确的 height、width、overflow 之中一个属性（除了auto值）才能将浮动元素严实地包裹。

最常见的有四种方法：

• clearfix清除法：clearfix使用:after属性，配合zoom:1 来实现清除浮动；实现：只要在其父层添加 class="clearfix" 即可。
• overflow清除法：父标签定义overflow之中一个属性（除了auto值）。
• 额外空标签清除法：在浮动层父标签内部最后添加空标签 <div class="clear"></div> 来实现。
• inline-block方法：在浮动层父标签上设置 inline-block 属性。

clearfix清除法 推荐方法

/*简洁版*/
.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    zoom:1;
}

/* 经典版 */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

overflow清除法

.test2{
    overflow:hidden;*zoom:1;
}

空标签清除法

.clear{
    display:block !important;
    clear:both !important; /* 空标签清除浮动核心代码 */
}

inline-block方法

.test4{
    display:inline-block;*display:inline;*zoom:1;
}

问题及注意事项：

• float元素设定margin-bottom时在IE6和IE7下会失效
• 关于position:relative对清除浮动的影响