CSS Clear Fix 小技巧

記的之前 evenwu 為了找尋外包 CSS 人才,出了一份考題,有提供上機考,真是佛心來的,還給用 Inspector 或上網。其中一題就是

第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況?如果我要在X元素內下背景,卻沒有顯示,請問如何解決? 解決方式就是實作本身 clearfix,或者是在元素後加上 clear: both 的標籤,大概就是底下的樣子

如果是要在 container 實作 clearfix,就必須透過 css beforeafter

.clearfix {
  *zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
  line-height: 0;
}
.clearfix:after {
  clear: both;
}

SASS 版本

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

這樣只要在任何 element 加上 clearfix css 就可以了,支援瀏覽器版版: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+


See also