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 24 Javascript
什么是JavaScript
Aug 13 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
JavaScript实现五子棋小游戏
Oct 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
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP+javascript液晶时钟
2006/10/09 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python编程实现归并排序
2017/04/14 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
2015年护士节活动总结
2015/02/10 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
大学生读书笔记范文
2015/07/01 职场文书
学校团代会开幕词
2016/03/04 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技