使用 after 伪类清除浮动

以前清除浮动的时候总是在想要清除浮动的元素后面添加

 <div style="clear:both;"></div>

或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器

 .clearfix:after{
content:"";
display:block;
height:;
clear:both;
visibility:hidden;
}

为兼容IE6,IE7,因为ie6,ie7不能用after伪类。加上下面代码

 .clearfix{zoom:}

一般情况下,如果父层内部有浮动(float)可能导致父层的高度为0,加上clearfix后就行了

HTML:

 <div class="parent clearfix">
<div class="left">left</div>
<div class="right">right</div>
</div>

CSS:

 .clearfix{zoom:}
.clearfix:after{
content:"";
display:block;
height:;
clear:both;
visibility:hidden;
}
.parent{
background-color:red;
width:120px;
}
.left{
float:left;
background-color:pink;
height:60px;
}
.right{
float:right;
background-color:#abcdef;
}
上一篇:oracle如何链接到另外一个数据库DB_LINK


下一篇:windows win10上传文件到linux服务器