Что конкретно делает + clearfix Compass / Blurprint? - PullRequest
Новая
       4

Что конкретно делает + clearfix Compass / Blurprint?

0 голосов
/ 06 ноября 2010

Обычно я использую div для очистки поплавков 

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

В Compass / Blueprint есть 

+clearfix

Что именно это делает? Это очищает текущий плавающий элемент, вместо очистки поплавков вверху? Означает ли это, что если текущий элемент использует +clearfix, то элементы что следует не делать ясно? На самом деле я не вижу clear для текущего элемента или следующего для теста с использованием Firebug, так что именно он делает?

Ответы [ 2 ]

3 голосов
/ 08 ноября 2010

Я использую 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.

0 голосов
/ 06 ноября 2010

Я предполагаю, что он делает что-то вроде этого: 

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

Этот код генерирует невидимый блочный элемент после element.clearfix, который очищает float.Вероятно, есть некоторые дополнительные хаки, чтобы заставить его работать в IE <8. Вы не увидите ничего в Firebug, так как он не отображает сгенерированный контент. </p>

...