主流的clearfix清楚浮动原理

我目前已知的清除浮动的方法大概有3种

首先是HTML结构:

<div id="warbox" class="clearfix">
    <div id="left"&gt;Left</div>
    <div id="right"&gt;Right</div>
</div>

然后是CSS代码:

<pre class='prettyprint'>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* <a href="http://liuxiaofan.com/" title="html">html</a> .clearfix { height: 1%;zoom:1; }
.clearfix { display: block; }
/* End hide from IE-mac */

Read More