JS中使用 after 伪类清除浮动实例
更新时间：2017年03月01日 14:13:00 投稿：mrr
这篇文章主要介绍了使用 after 伪类清除浮动实例，非常不错，具有参考借鉴价值，需要的的朋友参考下
以前清除浮动的时候总是在想要清除浮动的元素后面添加
<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：
<div class="parent clearfix"> <div class="left">left</div> <div class="right">right</div> </div>
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 伪类清除浮动实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Window.Open如何在同一个标签页打开,需要的朋友可以参考下2014-06-06
本文给大家分享使用getDaysInOneMonth(year, month)方法获取某个月的天数，方法超简单，感兴趣的朋友一起看看吧2018-05-05
javascriptvoid(0)含义以及与"#"的区别讲解
今天小编就为大家分享一篇关于javascriptvoid(0)含义以及与"#"的区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
用javascript获取任意颜色的更亮或更暗颜色值示例代码
最近在工作中遇到的一个需求，发现网上没有相对应的解决方法，索性自己写一个，所以这篇文章主要给大家介绍了关于利用javascript获取任意颜色更亮或更暗颜色值的相关资料，文中给出了详细的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。2017-07-07
这篇文章主要介绍了在TypeScript中使用泛型的方法，泛型是静态类型语言的基本特征，允许将类型作为参数传递给另一个类型、函数、或者其他结构2022-06-06
这篇文章主要介绍了微信小程序开发之自定义tabBar的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Servlet返回的数据js解析2种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
本篇文章主要是对js根据日期判断星座的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了微信小程序使用二次贝塞尔曲线画波浪，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家详细介绍了JavaScript实现简单进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最新评论