使用偽元素清除浮動

今天偶然看到一個關於使用偽元素: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 的屬性。