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基本语法分析说明
Jun 15 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
Javascript实现字数统计
Jul 03 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
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
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
php通过各种函数判断0和空
2020/07/04 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
python关键字and和or用法实例
2015/05/28 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Windows下安装Scrapy
2018/10/17 Python
对python的输出和输出格式详解
2018/12/08 Python
Django ORM filter() 的运用详解
2020/05/14 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
知识竞赛主持词
2014/03/26 职场文书
洗手间标语
2014/06/23 职场文书
会计实训总结范文
2015/08/03 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS