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为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
浅析JS运动
Dec 28 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
Vue实现省市区三级联动
Dec 27 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
PHP_MySQL教程-第一天
2007/03/18 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
JS控制表格隔行变色
2006/06/26 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
异步加载script的代码
2011/01/12 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
js实现图片实时时钟
2020/01/15 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
JS如何生成动态列表
2020/09/22 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python win32 简单操作方法
2017/05/25 Python
python爬取哈尔滨天气信息
2018/07/14 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python绘制组合图的示例
2020/09/18 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
护士自荐信
2013/10/25 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
Redis特殊数据类型bitmap位图
2022/06/01 Redis