例：
<html>
<head>
<style type="text/css">
* {margin:0;padding:0;}
#main {width:500px;background-color:#000;color:#FFF;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}
</style>
</head>
<body>
<div id="main">
<div class="left">left<div class="right">right
</body>
</html>
浏览器中浏览，发现定义的#main {background-color:#000;}不起作用，是因为left/right浮动了
清除浮动方法：
第一种，用.clearfix，即after伪对象清楚浮动
(这法子是一同事教的、而且几乎不存在兼容性问题）
.clearfix:after {content:"."; display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:block;}
html[xmlns] .clearfix {display:block;}
*html .clearfix {height:1%;}
*+html .clearfix {height:1%;}
注：对于.clearfix,一位仁兄（
网友评论