案例：
<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>
結(jié)果并非想象中的那樣，box元素高度為0，其高度并沒有讓其內(nèi)部元素撐開浪汪。
處理方案：
1抬闷、最優(yōu)浮動閉合方案：在浮動元素的父云素上添加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會觸發(fā)hasLayout，從而使元素閉合內(nèi)部的浮動。
(2)虽另、在標準瀏覽器下，.clearfix:after這個偽類會在應用到.clearfix的元素后面插入一個clear: both的塊級元素饺谬，從而達到清除浮動的作用捂刺。
2、構(gòu)成Block Formatting Context的元素可以清除內(nèi)部元素的浮動募寨。那么只要使.clearfix形成Block Formatting Context就好了族展。構(gòu)成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會產(chǎn)生多余空白例书，所以也排除掉锣尉。
display: table-cell, table-caption，為了保證兼容可以用display: table來使.clearfix形成一個Block Formatting Context决采，因為display: table會產(chǎn)生一些匿名盒子自沧，這些匿名盒子的其中一個（display值為table-cell）會形成Block Formatting Context
.clearfix {
zoom: 1;
display: table;
}
