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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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中截取中文字符串的代码小结
2011/07/17 PHP
使用php实现截取指定长度
2013/08/06 PHP
js select常用操作控制代码
2010/03/16 Javascript
js+css在交互上的应用
2010/07/18 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
python修改操作系统时间的方法
2015/05/18 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python global全局变量函数详解
2018/09/18 Python
python3实现名片管理系统
2020/11/29 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python能做哪方面的工作
2020/06/15 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
党员培训思想汇报
2014/01/07 职场文书
真诚的求职信
2014/07/04 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
法人代表证明书格式
2014/10/01 职场文书
党员作风建设自查报告
2014/10/23 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
MySQL 视图(View)原理解析
2021/05/19 MySQL