请问在div里写加before和after又没加什么特殊的处理的意义是什么

Question

在阿里云首页看到很多div都有加上:before和:after的属性.
但是大都只是做了类似的如下处理,请问这样的意义是什么呢?

.y-clearfix:before, .y-clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}

为什么不是在div里插入一个空div,然后把这些属性放在那个空div上,而是要使用before和after呢?
希望css大神帮忙来扫盲.

Answer 1

根据类名 y-clearfix 来推测这应该是为了清除浮动元素在 y 方向的影响。
写个 demo 来测试下：

<style>
div {
  border: 1px solid #ccc;
}
</style>
<div>A
  <div style="float: left;height: 50px;">B</div>
</div>

由于父容器内有了浮动元素 div 的缘故，导致父容器的高度不能再自适应，因为浮动元素已经脱离了正常的文档流，现在我们添加上这个类 .y-clearfix。

<style>
div {
  border: 1px solid #ccc;
}
.y-clearfix:before, .y-clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}
</style>
<div class="y-clearfix">A
  <div style="float: left;height: 50px;">B</div>
</div>

父容器高度恢复正常，清除浮动成功，但是不要忘了还要加上一个 clear: both 的属性。
其实之前我清除浮动使用的是其他的方法，但是我看到这个类名就觉得应该是与清除浮动有关，所以测试了下，果不其然，希望答案对梦康兄有帮助。:)

Answer 2

html是用来描述信息的。

Answer 3

用空div标签和用伪元素来清除浮动的效果是一样的，但是，空的div标签在整个文档结构上没有任何意义，这是html代码优化时需要规避的细节。题主可以看看http://www.iplaysoft.com/，文章预览图hover效果的蓝色遮层也是用伪元素定义的，这样html部分就不会有冗余的空标签了。

Answer 4

这不就是插个空的div的原理照搬过来的么。
只不过，我们可以用更高级的用法了啊。