Compass/Blurprint的+ clearfix究竟做了什麼？

Question

通常遊戲中，我使用div清除浮動

<div style="clear:both"></div> 

在北斗/藍圖，有

+clearfix 

究竟是什麼呢？是否清除當前浮動元素，而不是清除上面的浮動元素？這是否意味着如果當前元素使用+clearfix，那麼後面的元素 不必做清楚？其實我沒有看到任何clear爲當前元素或下一個作爲使用Firebug的測試，所以它究竟做了什麼？

Answer 1

我的猜測是，它是這樣的：

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

此代碼element.clearfix從而清除浮之後產生一個不可見的塊狀元件。可能還有一些額外的黑客參與IE瀏覽器的工作。< 8.你不會在Firebug中看到任何東西，因爲它不會顯示生成的內容。

Answer 2

我運行v0.10.5和源代碼/Library/Ruby/Gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss部分寫着：

// This basic method is preferred for the usual case, when positioned 
// content will not show outside the bounds of the container. 
// 
// Recommendations include using this in conjunction with a width. 
// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html) 
@mixin clearfix { 
    overflow: hidden; 
    @include has-layout; 
} 

這是SCSS語法，但它是相當直接類似於SASS語法，你參考。 has-layout mixin包含在同一目錄中的_hacks.scss部分中，並且似乎特定於IE。