CSS Clear

記的之前 evenwu 為了找尋外包 CSS 人才，出了一份考題，有提供上機考，真是佛心來的，還給用 Inspector 或上網。其中一題就是 第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況？如果我要在X元素內下背景，卻沒有顯示，請問如何解決？ 解決方式就是實作本身 clearfix，或者是在元素後加上 clear: both 的標籤，大概就是底下的樣子 如果是要在 container 實作 clearfix，就必須透過 css before 和 after。 .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. [Read More]