清除浮动——fix:after

之前用于清除浮动的css是这样定义的，昨天发现这样也可以：

原代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<link href="css/reset.css" type="text/css" rel="stylesheet">
<style type="text/css">
.fix{zoom:1;}
.fix:after{display:table;content:" ";clear:both;}
.left,.right{float:left;width:50%;}
.left{background:#f60;color:#fff;}
.right{background:#ccc;color:#000;}
</style>
</head>
<body>
<!--<a class="tmall-slide-left" href="#"></a>
<a class="tmall-slide-right" href="#"></a>-->
<div style="padding:20px;" class="fix">
<div class="left">你好，你好，今天下雨了。</div>
<div class="right">你好，你好，今天下雨了。</div>
</div>

</body>

</html>

之前定义的：

fix{zoom:1;}

fix:after{clear:both;content:" ";height:0;visibility:hidden;}或者是fix:after{content:" ";clear:both;line-height:0;overflow:hidden;}

昨天的在ie6/7/8，火狐，谷歌中测试通过：

fix{zoom:1;}

fix:after{clear:both;content:" ";display:table;}

posted @ 2013-05-31 09:14  ann_glx  阅读(184)  评论(0)    收藏  举报