:after伪类+content内容清除浮动

1.简单说说content内容生成

content内容生成就是通过content属性生成内容

例如下面这个简单的例子:
这里写图片描述
此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。

2.:after伪类+content 清除浮动的影响

有点经验的同行应该知道,一般不含包裹属性的div内部有浮动元素的话,那么这个浮动元素会让此div的高度塌陷。如下例子:

这里写图片描述
正如文章开始提到的,IE8+和其他所有现代浏览器都支持:after+content,所以,对于这些浏览器我们可以使用:after+content方法清除浮动造成的塌陷。使用如下:
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}

其中使用content属性设置要添加的伪类内容,使用clear清除浮动,使用overflow保证添加的伪类内容不会超出,使用visibility将填入的内容进行隐藏,使用display将元素设置为块状

这样就可以让IE8+和其他浏览器清除浮动破坏带来的塌陷问题了。至于暂不支持:after伪类的IE6/IE7,我们可以使用IE私有的zoom缩放属性让div远离浮动的破坏。故,双剑合璧下就是:
这里写图片描述
这样子,就可以实现目前所有浏览器的清除浮动影响的方法了。

虽然,清除浮动影响方法很多,添加包裹属性的元素,例如:position:absolute; display:inline-block; float:left; overflow:hidden等,但是,这些所有的方法都有局限性。我个人觉得:after伪类+zoom是目前最使用的清除浮动元素影响的方法。且不产生多余的标签,所以,我一直用它。

这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407719.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图片宽高自动适配

一些长宽比不同的图片适应盒子,我们往往用js获取图片宽高,得到宽高谁长,让长边100%。 其实用css就可以解决,这样无论长边是谁都能适配屏幕了 img{ max-width:100%; max-height:100%; }

Pro*c源程序中使用宿主结构保存查询结果

开发环境:VC6 XP Oracle10 Pro*c源程序如下: /*功能:演示了在pro*c源程序中使用结构体(宿主结构)来保存查询结果使用宿主结构的注意事项1. 结构成员的数据类型、顺序必须与内嵌SQL语句中列的数据类型和顺序匹配2. 宿主结构与PL/SQL的记录类…

Eclipse常用插件下载地址

Eclipse常用插件下载地址 官方网站http://www.eclipse.org/downloads/index.php下载eclipse的最新版本 Eclipse 项目资源中心:http://www.ibm.com/developerworks/cn/opensource/top-projects/eclipse.html 常用插件下载地址: Lombo  http://www.objectlearn.com/ TomcatPlu…

需求更大的--if条件判断

现实生活中我们,绝大多数情况下,我们判断1个条件 并不是说仅仅是要得到这个结果, 而是要根据这个结果做出不同的反应, 但是比较表达式和逻辑表达式他们是用来判断1个或者多个条件是否成立的,那我们怎么办咧? 在代码…

Vue基础之Vue实例

构造器: 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。 可以通过扩展选项来扩展 Vue 构造器函数…

移动端禁止视频自动全屏播放

<video x5-playsinline"" playsinline"" webkit-playsinline""></video>在标签上加上 x5-playsinline"" playsinline"" webkit-playsinline"" 解决问题

[Oracle]使用非滚动游标

源码&#xff1a;xx.pc /*功能&#xff1a;演示了Oracle非滚动游标操作定义游标时注意事项&#xff1a;1. DECLARE CURSOR语句必须是使用游标的第一条语句2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有前31个字符有效3.…

Taro+react开发(20)--控制icon大小

<AtIconsize{20}className"company-icon"value"trash"color"#ccc"></AtIcon>

线程访问临界区的问题 实例,需解决

using System; using System.Threading; namespace LockAndThread { /// <summary> /// Class1 的摘要说明。 /// </summary> class Test { /// <summary> /// 应用程序的主入口点。 /// </summary> static Thread[] threadsnew Thread[10]…

[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API

介绍本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具&#xff1a;HTML5&#xff0c;JavaScript&#xff0c; CSS3。本篇是HTML5介绍的第三篇&#xff0c;主要介绍HTML5的Canvas API。相关文章&#xff1a;移动Web应用程序开发 HTML5篇 (一) HTML5简介移…

Taro+react开发(21)--注意参数格式

constructor() {super(...arguments);this.state {dataList: [],checkedList: [],isOpend: false,code: ""};}

Vue基础之Vue模板语法

插值&#xff1a; 文本&#xff1a; 数据绑定最常见的形式就是使用 “Mustache” 语法&#xff08;双大括号&#xff09;的文本插值&#xff0c;双大括号会将数据解析成纯文本 Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时&#xff0c;绑定的数据对象…

html头部尾部分离组件引入(JQ)

html写官网之类&#xff0c;我们经常会有很多页面同一头部和尾部&#xff0c;我们把它们分离出来&#xff0c;组件引入 vue等框架类的就不说了&#xff0c;主要是说html原生态的 &#xff08;如果是PHP文件可以直接include() 或 require() 函数引入html文件&#xff09; 用到JQ…

[Oracle]使用滚动游标

源代码&#xff1a;xx.pc /*功能&#xff1a;演示了Oracle滚动游标操作定义游标时注意事项&#xff1a;1. DECLARE CURSOR语句必须是使用游标的第一条语句2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有前31个字符有效3…

CMOS密码安全攻略

要说密码。首先就是CMOS密码了。CMOS(本意是指互补金属氧化物半体存储器&#xff0c;是一种大规模应用于集成电路芯片制造的原料)是电脑主板上的一块可读写的RAM芯片&#xff0c;主要用来保存当前系统的硬件配置。CMOS RAM芯片由系统通过一块后备电池供电&#xff0c;所以无论是…

Taro+react开发(22)--模态框组件

<AtModalisOpened{isOpend}title"标题"cancelText"取消"confirmText"确认"onClose{this.handleClose}onCancel{this.handleCancel}onConfirm{this.handleConfirm}content"确认删除吗"/>

JQ trigger触发a标签点击事件

trigger() 方法触发被选元素的指定事件类型。 $("a").trigger(click) ;这样直接触发a标签上的点击事件无法生效 需要绑定给a标签的子集 $("a span").trigger(click) ;jq触发a标签跳转成功

xmpp muc 群聊协议 3

6. Entity Use Cases A MUC implementation MUST support Service Discovery [7]. 服务端必须实现 service discover 6.1 Discovering Component Support for MUC 发现服务器是否支持muc A Jabber entity may wish to discover if a service implements the Multi-User Chat pr…

Vue基础之Class和Style绑定

既然v-bind可以动态绑定标签的属性&#xff0c;那么也可以用v-bind来处理class和style&#xff0c;只需要计算出表达式最终的字符串。不过&#xff0c;字符串拼接麻烦又易错。因此&#xff0c;在 v-bind 用于 class 和 style 时&#xff0c; Vue.js 专门增强了它。表达式的结果…