CSS Float 與 CSS Hack Clearfix

常常聽到float就要配上clearfix，但是為什麼呢？

子元素浮動到上層之後，在某些情況下會造成所謂「父元素的高度塌陷」，也就是原本包住子元素的容器會因為子元素全部都浮動脫離原有的DOM序，造成高度預設為auto的父元素「沒有內容」而失去高度。

附上範例：How clearfix works

SASS：
.clearfix
  &:before
    content: ""
    display: table
  &:after
    content: ""
    display: table
    clear: both
  zoom: 1


CSS：
.clearfix, {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}