使用伪元素清除浮动

今天偶然看到一个关于使用伪元素:before和:after清除浮动的问答，觉得很不错，特此记录一下。

原文出处：https://segmentfault.com/q/1010000000530778

先给出一个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 的属性。