JS中使用 after 伪类清除浮动实例


Posted in Javascript onMarch 01, 2017

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

<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 伪类清除浮动实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
JavaScript模块详解
Dec 18 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Angular1.x自定义指令实例详解
Mar 01 #Javascript
轻松学习Javascript闭包
Mar 01 #Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 #Javascript
node.js实现回调的方法示例
Mar 01 #Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 #Javascript
Angular2库初探
Mar 01 #Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 #Javascript
You might like
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
javascript读写json示例
2014/04/11 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
Python群发邮件实例代码
2014/01/03 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python tkinter基本属性详解
2019/09/16 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
老乡聚会通知
2015/04/23 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Nginx配置Https安全认证的实现
2021/05/26 Servers
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android