/*大部分现代浏览器*/ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } /*IE６＆７（触发ｈａｓｌａｙｏｕｔ）*/ .cf{ *zoom: 1; }
下面是一个测试的例子检查了所有的浏览器都完美的兼容了
<!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="Keywords" content=""/> <meta name="Description" content=""/> <link type="text/css" href="normalize.css" rel="stylesheet" /> <style type="text/css"> .box{border: solid 2px red;} .rs{float: left;width: 200px;height: 400px;background: yellow;} .ls{float: right;width: 300px;height: 600px;background: pink;} .cf:after,.cf:before{content:' ';display: table;} .cf:after{clear:both;} .cf{*zoom:1;} </style> </head> <body> <div class="box cf"> <div class="ls"></div> <div class="rs"></div> </div> </body> </html>