清除浮动的方法

清除浮动方法
原理:IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决IE6,IE7的浮动问题优点:浏览器支持性好,不容易出现怪问题,目前腾讯网易等大型网站使用此方法缺点:代码多建议:推荐使用,建议定义公共类,减少CSS代码
<style type=”text/css”>
.div1{
background:#000080;
}
.div2{
background:#800080;
height:100px;
}
.left{
float:left;
width:20%;
height:200px;
background:#dddddd;
}
.right{
float:right;
width:30%;
height:200px;
background:200px;
}

.clearfloat{
zoom:1;
}
.clearfloat:after{
display:block;
clear:both;
content:””;
visibility:hidden;
height:0;
}
</style>
<body>
<div class=”div1 clearfloat”>
<div class=”left”>left</div>
<div class=”right”>right</div>
</div>
<div class=”div2″>
div2
</div>
</body>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理