详细解读CSS中的伪类afterCSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

看到之后，想到以前见到过有用 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 编辑器实在是大爱啊！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！