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是目前最使用的清除浮动元素影响的方法。且不产生多余的标签，所以，我一直用它。

:after伪类+content内容清除浮动相关推荐

:after伪类 content内容生成经典应用举例——张鑫旭
一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容. ...
:after伪类+content经典应用举例
:after伪类+content 清除浮动的影响 .box{padding:10px; background:gray;} .l{float:left;}<div class="box ...
超链接的伪类及如何清除缓存
超链接的伪类及如何清除缓存超链接的伪类: a:link --未访问状态 a:visited--已访问状态 a:hover--鼠标悬停状态 a:active--鼠标激活(点击)状态前方高能请注意: ...
css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
0804 css3伪类 target 突出显示活动的 HTML 锚 div:target{background: #0e3757;} 表单控件伪类 <style>input:enabled ...
html中after伪类原理,css :after伪类+content使用说明和方法
首先,这段代码中的content: ".";有什么用,解决了什么问题,为什么要用他? content属性用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创 ...
清除浮动的几种方式总结
1. 对父级设置适合CSS高度对父级设置适合高度样式清除浮动,一般设置高度需要能确定内容高度才能设置. 缺点:高度固定不可变,不够灵活 2. clear:both清除浮动为了统一样 ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
HTML：利用:after伪元素清除浮动
:after伪元素和:before伪元素分别用于在元素之后和之前添加内容,实际网页开发过程中:after伪元素比较常用,借助:after伪元素一般用于清除浮动,利用伪元素来清除浮动是常规浮动清除的三种 ...
一天搞定CSS：清除浮动（float）--13
上一节已经说明了为什么要清除浮动了.这里我们就来解决浮动产生的各种问题. 为什么要清楚浮动? 地址:http://blog.csdn.net/baidu_37107022/article/detail ...

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