css实际技巧---父div中有浮动的子div，父容器不能自适应高度，清除浮动，父容器自适应高度

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

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

为什么不是在div里插入一个空div,然后把这些属性放在那个空div上,而是要使用before和after呢?

希望css大神帮忙来扫盲.

==================================================================================

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

<style>
div {
  border: 1px solid #ccc;
}
style>
<div>A
  <div style="float: left;height: 50px;">Bdiv>
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;">Bdiv>
div>

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