案例：
<pre><code>
<html >
<head>
<title> css用clearfix清除浮动实例</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
.box{ background:#F00;width:510px; position:relative;}
.l{float:left; background:#333;width:200px; height:100px;}
.r{float:right;background:#666;width:200px; height:200px;}
.s{width:100px; height:100px;background:#FF0;float:left;}
</style>
<div class="box">
<div class="l">left</div>
<div class="r">right</div>
<div class="s">absolute</div>
</div>
</body>
</html>
</code></pre>
结果并非想象中的那样，box元素高度为0，其高度并没有让其内部元素撑开。
处理方案：
1、最优浮动闭合方案：在浮动元素的父云素上添加class=”clearfix”。
clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
clearfix{*+height:1%;}或者是clearfix{zoom:1;}//IE6&&IE7
简单的说下.clearfix的原理：
(1)、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
(2)、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。
2、构成Block Formatting Context的元素可以清除内部元素的浮动。那么只要使.clearfix形成Block Formatting Context就好了。构成Block Formatting Context的方法有下面几种：
•float的值不为none。//不适合
•overflow的值不为visible。
•display的值为table-cell, table-caption, inline-block中的任何一个。
•position的值不为relative和static。//不适合
因为是应用了.clearfix和.menu的菜单极有可能是多级的，overflow: hidden或overflow: auto会把下拉的菜单隐藏掉或者出滚动条，所以不适合。
而display: inline-block会产生多余空白，所以也排除掉。
display: table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context，因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context
.clearfix {
zoom: 1;
display: table;
}
