详细解读CSS中的伪类after

1. 引子

前段时间学习 web 布局的时候，因为要用浮动 float 属性，所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div 标签的方式来清除浮动的，主要代码如下：

看到之后，想到以前见到过有用 css 伪类 after 来进行清除浮动的方式。记不太清了，于是写成了如下的情况：

悲剧发生了，mainBox 中的 #CFF 颜色并没有出现在 leftBox 和 rightBox 中间，说明上述的写法有地方不对了。询问了伟大的谷歌之后才发现，css 的 after 伪类应该写在 mainBox 之后，即：

    P.S.
    1. 现在回过头来看上述方法，其实上述方法所谓的清除浮动，都是将没有设置高度的.mainBox的高度撑起来，从而使得.mainBox的弟元素能直接跟在.mainBox后面。而不会因为.mainBox高度塌陷而被隐藏在.mainBox内部浮动的子元素下。防止高度塌陷还可以使用创建一个 BFC 的方法（如overflow:hidden）来进行。
    2. 如果.mainBox设置了高度，且大于或等于其浮动的子元素，那么不用这样的清除浮动的方式，.mainBox的弟元素也不会受到.mainBox内部浮动子元素的影响。
    3. 若果不考虑.mainBox的高度塌陷问题，直接在其弟元素处设置clear属性即可。

2. 关于 after 的思考

w3school 中关于 after 伪类的介绍如下：

    定义和用法
    :after 选择器在被选元素的内容后面插入内容。
    请使用 content 属性来指定要插入的内容。

比较有歧义的是这个“被选元素的内容后面”中的 后面 两个字。开始我误认为了是将 after 中的内容插入至被选元素的 弟元素 位置上。

会产生类似于

这样的效果 （当然，after 伪类实际上是不会产生一个 DOM 元素的）。

但通过引子中用 css 伪类 after 来进行清除浮动的检验，发现 后面 实际上应该理解为将 after 中的内容插入至被选元素的 子元素 位置上，即类似于如下效果：

因此，才有了引子中用 mainBox:after{} 这样的方式来实现 after 伪类清除浮动，而非 rightBox:after{}这种方式。

简单总结下：after 伪类所产生的内容应该是在被选元素的子元素位置(而且在所有子元素的最后，简单的几个测试就能发现，不再赘述)，而非被选元素的弟元素位置。
3. w3school 中的示例

从这个 示例 可以看出，after 伪类内容的默认 display 方式应该为内联 inline。

其实看到这个示例才发现，after 伪类所产生的内容应该就是在被选元素的子元素位置的（汗，那还饶了那么大个圈才发现……）。示例中 p 标签的 after 内容展现的方式已经很明确了，大家可以仔细体会下。所以说，看示例也是很重要啊。

P.S. 本人已零零碎碎学了些前端的东西，目前正在摸索中前进。水平有限，如有不对之处，还望各位多多指教。

&& 这个 markdown 编辑器实在是大爱啊！

最新评论