首页 / CSS / 使用after伪类清除浮动

使用after伪类清除浮动

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用after伪类清除浮动，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含797字，纯文字阅读大概需要2分钟。

内容图文

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

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

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

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

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

 .clearfix{zoom:1}

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

HTML：

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

CSS:

.clearfix{zoom:1}    
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.parent{
    background-color:red;
    width:120px;
}
.left{
    float:left;
    background-color:pink;
    height:60px;
}
.right{
    float:right;
    background-color:#abcdef;
}

更多使用 after 伪类清除浮动相关文章请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的使用after伪类清除浮动全部内容，希望文章能够帮你解决使用after伪类清除浮动所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/414623.html

来源：【匿名】