JS中使用 after 伪类清除浮动实例

以前清除浮动的时候总是在想要清除浮动的元素后面添加

<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 伪类清除浮动实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 给before和after伪元素设置js效果的方法

    给before和after伪元素设置js效果的方法

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是"伪元素". 前面的话 无法直接给before和after伪元素设置js效果 例子说明 现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜色为红色的伪类) <!DOCTYPE html> <html l

  • Javascript insertAfter() 实现函数代码

    复制代码 代码如下: //DOM没有提供insertAfter()方法 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { // 如果最后的节点是目标元素,则直接添加.因为默认是最后 parent.appendChild(newElement); } else { parent.insertB

  • JavaScript之appendChild、insertBefore和insertAfter使用说明

    appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法 target.appen

  • jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d

  • javascript insertAfter()定义与用法示例

    本文实例讲述了javascript insertAfter()定义与用法.分享给大家供大家参考,具体如下: HTML部分: <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript部分: window.onload=function(){ var a =document.createElement("span"); var b =document.createTe

  • JS中使用 after 伪类清除浮动实例

    以前清除浮动的时候总是在想要清除浮动的元素后面添加 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } 为兼容IE6,IE7,因为ie6,ie7不能用after伪

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • 遍历js中对象的属性和值的实例

    今天优化项目时,遇到了关于"遍历js中对象的属性和值"的需求.之所以会有这个需求,是因为要做一个局部刷新表格内容的js插件.刚开始我去网上荡了一个js分页插件,但是智商实在捉急,搞了半天没搞出来!后来就怒了,干脆自己写一个好了.结果就遇到了这个问题! 问题:通过遍历属性名数组,获取对象的属性值失败 刚开始的错误代码如下: for(var i=0;i<dataList.length;i++) { var dataLine="<tr>"; for(va

  • 用JS中split方法实现彩色文字背景效果实例

    用JS中split方法实现彩色文字背景效果实例

    先来看看实现效果图 效果实现步骤: 1.获取要用到的元素: 2.声明一个数组变量(arrColor)存放颜色值: 3.给按钮添加点击事件: 4.获取文本框的value值,并用split方法把文本框的字符串值转换成数组(arr)存放: 5.循环取出存数组(arr)中的值并添加上span标签: 6.设置span标签的背景色:从数组(arrColor)循环取值: 7.把设定好的内容添加到div中: 效果完整代码: <!doctype html> <html> <head> &

  • node.js中事件触发器events的使用方法实例分析

    本文实例讲述了node.js中事件触发器events的使用方法.分享给大家供大家参考,具体如下: node.js是基于事件驱动的,通过events,我们可以方便的创建事件,并通过触发事件来调用我们自定义的监听函数. 所有能触发事件的对象都应该是 EventEmitter 类的实例,一般我们自定义一个类继承于 EventEmitter 类. 通过on()方法我们可以绑定事件与监听函数: const Events = require('events'); //自定义一个类,继承于EventEmitt

  • 在Node.js中实现文件复制的方法和实例

    Node.js 本身并没有提供直接复制文件的 API,如果想用 Node.js 复制文件或目录,需要借助其他的 API 来实现.复制单个的文件可以直接用 readFile.writeFile,这样比较简便.如果是复制一个目录下的所有文件,目录下可能还包含了子目录,那么此时就需要用到更高级点的 API 了. 流 流是 Node.js 移动数据的方式,Node.js 中的流是可读/可写的,HTTP 和文件系统模块都有用到流.在文件系统中,使用流来读取文件的时候,对于一个大文件可能并不会一次性读取完,

  • Android开发中的文件操作工具类FileUtil完整实例

    本文实例讲述了Android开发中的文件操作工具类FileUtil.分享给大家供大家参考,具体如下: package com.ymerp.android.tools; import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java

  • JS中数组与对象的遍历方法实例小结

    本文实例讲述了JS中数组与对象的遍历方法.分享给大家供大家参考,具体如下: 一.数组的遍历: 首先定义一个数组 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道数组长度: arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 3.map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新

  • JS中超越现实的匿名函数用法实例分析

    本文实例讲述了JS中超越现实的匿名函数用法.分享给大家供大家参考,具体如下: 一般函数: function show1(name){ alert(name); //打印:zhangsan } show1("zhangsan"); 匿名函数: var show2 = function (name) { alert(name); //打印:张三 } show2("张三"); 上面2种定义函数的区别: 1.我们知道所有的function都会在window对象里 funct

  • node.js中fs文件系统模块的使用方法实例详解

    本文实例讲述了node.js中fs文件系统模块的使用方法.分享给大家供大家参考,具体如下: node.js中为我们提供了fs文件系统模块,实现对文件或目录的创建,修改和删除等操作. fs模块中,所有的方法分为同步和异步两种实现. 有 sync 后缀的方法为同步方法,没有 sync 后缀的方法为异步方法. 一.文件的整个读取 const fs = require('fs'); //参数一表示读取的文件 //参数二表示读取的配置,{encoding:'null', flag:'r'} //encod

随机推荐