从本篇开始，我们就来一起再重新学习一遍 CSS 的内容吧。本系列分为 6 个篇章。第一个篇章我们开始学习伪类（包括伪元素）吧。
使用 ::before 插入的内容在元素中的其他内容之前插入，默认情况下是行内显示。内容的值使用 content 属性指定；::after 也是一样的，只不过是在内容之后插入。
为什么我们要使用这两个伪元素呢？原因很简单，我们可以在元素之前插入内容，而却不添加到 DOM 中。
首先我们创建一个 p 标签：
<p>这是一个段落。</p>
接着我们再使用伪元素进行内容的添加：
p:before {
content: '我在段落前面哦，';
color: #cccccc;
font-size: 1.5em;
}
显示结果
我们可以看到，在我们的
p 标签前面添加了一个行内元素内容。这不是最重要的，重要的是 DOM 树的变化是怎样的。
控制台显示
这里需要注意的是，我们使用 ::before 或 ::after 添加的元素是显示在我们的标签前面的，也就是说：它是一个不占 DOM 树的内联元素（inline）。当然，本来我们是看不到它的，可 Chrome 的开发者工具却方便地使我们看到了。
需要注意的是，我们可以使用伪元素插入图片：
.element::before {
content: url(path/to/image.png); /* 一个图片，也可以是一个图标 */
}
我想说的是什么呢？那就是：使用伪元素插入图片时，我们是不可以改变图片大小的。因此需要在事先将图片大小固定。
如果本章到这里就结束了，那就真的没什么技术含量了。我们接下来讲讲两个最常见也最重要的用法吧。
（一）清除浮动
清除浮动，我们都是最常见的吧。但是，首先我们必须清楚“浮动”这一概念。
浮动（float）：当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移到碰到了所处的容器的边框，或者碰到了另外一个浮动的元素。
我们先用之前的例子吧：
第一步
上图我们看到，使用了
::before 在 p 标签前添加了内容后，它就和 p 标签的内容在一起了。
接下来我们在 p 标签前添加两个不同颜色的小方块看下吧：
第二步
这是个自然而然的结果，由于
div 是块级元素，独占一行。因此将 p 标签以及 ::before 中的内容挤下去了。这就是所谓的文档流，即 DOM 树由上而下的解析结构（在不使用 CSS 控制的情况下）。
好了，那么我们为它们加上浮动试试能否解决这个问题吧。
第三步
我对这两个小方块使用了 float: left; 和 float: right; 后，神奇的事情发生了。它们都跑到最外层的容器的最左边与最右边去了。这完美的解决了我们的问题。
好了，示例展示完了。我们开始思考最开始对浮动的定义吧。这里有两个关键字：“脱离文档流”与“另一个浮动元素”。
什么是“脱离文档流”？我们开始说到 div 是一个块级元素，独占一行对吧。而浮动就可以使其强制地被推到容器的最左边或最右边。而此时，它就不再是文档流中的一员了。而后面的文字却可以环绕着这个方块，这也就是 float 最初被设计出来的目的。浮动的目的就是为了使得文字可以得以环绕显示。
上一个图片可能不是看得很清楚，我再把小方块的高度减小一点看看吧。
第四步
现在看得很清楚了，虽然小方块脱离了文档流，但确实是文字环绕着小方块显示。但是，position 中的
absolute 和 relative 却不是这样。这里我就不讲了，在以后的小节中我们再来详细叙述。
第二点我们来说说“另一个浮动元素”。
浮动元素是一家嘛。我们先设置 div 的宽度为 800px，然后小方块1 为 300px 宽，小方块2 为 500px 宽，我们都设置其左浮动。由于有 border 的存在，因此 300 + 502 > 800；所以自然而然的，后面的小方块就不够位置啦，因此就被挤到下面去了。
第五步
好了，关于浮动的知识我们先讲这么多。接下来我们看看清除浮动是什么吧。
首先，我们在页面中创建四个 div 组成的盒子。如下图示：
第一步
此时，盒子是按照标准文档流依次排列的，那么我们给盒子2 一个右浮动。因此出现了下面的情况：
第二步
也就是说：盒子2 脱离了标准文档流，变成了浮动的一员。而剩余的 3 个盒子依旧按照标准文档流排列，所以下面的 2 个盒子就把原本属于盒子2 的位置给占据了。
一般来说，这也是我们平时作页面时所想要的结果，但是，如果不止一个元素浮动呢？
接下来我们改变一下，我们将盒子2 与盒子3 都设置为左浮动，而盒子1 与盒子4 仍然属于标准文档流中的一员，会发生什么呢？
第三步
哎呀呀，出问题了！由于盒子2、3 的浮动导致了它俩会紧靠着容器（这里是 body）的边界处，而由于它俩脱离了文档流，所以理所应当的盒子4 就承担了这个艰巨的任务，把它们俩空缺的位置给填上，可这么做的后果就是将盒子4 给遮住了。那么我们有什么解决办法吗？
当然有啦，一会我们就来看看吧。
聪明的同学一定发现了一个问题：为什么盒子2 浮动的时候不是接着盒子1 的后面呢？这是因为浮动的特性所导致的。如果前面的盒子不浮动，那么后面的盒子浮动时一定会挨着它的垂直方向。当然，如果你加上 margin: *px; 会改变这一现象。
这句话很重要：也就是说，在不浮动时，文档是垂直排列的；而浮动后，文档是按照水平排列的。
而所谓的“清除浮动”，就是清除这一水平排列的现象。
我们都知道清除浮动的代码吧：
clear: both; <--清除两边的浮动--!>
clear: left; <--清除左边的浮动--!>
clear: right; <--清除右边的浮动--!>
但是我们要牢记一点：清除浮动的代码只作用于元素本身。
我们举个例子：就比如上面的例子吧，如果我们想要盒子3 下去，如果我们在盒子2 上使用 clear: right 则不会有任何效果；而在盒子3 上使用 clear: left 才可以正确清除浮动。
第四步
现在明白了吗大家？可是你会说不对呀！！！这明明还没有解决问题啊！
像这种情况，很简单。还记得我们前面提到的，清除浮动只会作用于自身元素吗？我们的盒子4 受到了浮动的影响啦，那么我们给它加上 clear: left; 就解决问题啦。
第五步
总结
我知道你在想什么，“可是这和这两个伪元素有什么关系呀！”。一节东西讲的太多难以消化，所以我们下一节再来讲这两个实践中的例子。
网友评论