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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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 全文搜索和替换的实现代码
2008/07/29 PHP
php修改时间格式的代码
2011/05/29 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php不用正则验证真假身份证
2013/11/06 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
小学绿色学校申报材料
2014/08/23 职场文书
信用卡工资证明范本
2014/10/17 职场文书
后天观后感
2015/06/08 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android