<p>“90%的CSS布局的兼容问题都是浮动布局引起的”，这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动，我回答过N次，但这位新手朋友好像始终记不住，总是会在这里出问题，包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确，但也反映出了前端人员在这个问题上或多或少的要纠结一番，新手会时常犯难，老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法，发觉方法还是挺多的，那么有没有一种最优的方法可以实现一劳永逸呢？且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签，空标签上定义一个清除浮动的类：</p>
<pre class="brush: c-sharp">
<style type="text/css">
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
</style>
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>
CSS清除浮动
12