CSS实例代码：万能float闭合（清除浮动）

个人比较喜欢这种清除浮动的写法。因为不用再添加一个标签来写入样式直接写在大容器里面就可以了。但是有前提是里面的子元素要是浮动的。如果有的浮动有的不浮动建议还是在最后面添加标签来添加清楚样式。

一、<div class="main clearfix "><div class="fl">左边</div><div class="fr">右边</div> </div>

二、<div class="main"><div class="fl">左边</div><div class="fr">右边</div><div class=" clear "></div></ div>

 

 

 

 

样式

<style>

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
*html .clearfix{height:1%;}
*+html .clearfix{height:1%}
.clearfix{display:inline-block}
.clearfix {display:block;}

.clear{clear:both;height:0px;overflow:Hidden;display:block;} /**添加浮动标签末尾**/

 

.main{width:400px;}

.fl{float:left;width:200px;background:#ccc;}

.fr{float:right;width:200px;background:#ddd;}

</style>

转自： http://www.ok22.org/art_detail.aspx?id=43