Новый mikro clearfix huck

Часто ли Вы используете Clearfix? Я думаю, что в тои или ином виде — часто. На просторах всемирной сети я нашел новый метод реализации этого хака с минимальным использованием CSS.

Demo: Micro clearfix hack

Поддерживаются браузеры: Firefox 2+, Safari 2+, Chrome, Opera 9.27+, IE 6+, IE Mac.

Я не буду переводить полный текст статьи, выложу самое основное — код. В общем то он на столько логичен, что пояснения вряд ли кому-то потребуются 🙂

.cf {
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}
 
.cf:before,
.cf:after {
    content: "";
    display: table;
}
 
.cf:after {
    clear: both;
}

Если вдруг кто-то не понял, что здесь написано, попробую вкратце описать алгоритм:
1. С помощью CSS создаем невидимые блоки
2. Эти блоки используем как отбивку (как то сразу мне не нравилось захламлять отбивками HTML)
3. п.1 не работает в IE6 и IE7, потому для этих чудных браузеров используем свои фиксы.

Размещено в CSS.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • Hiway

    Использовать данный фикс можно, но… Зачем добавлять не валидных правил, когда в старых вариантах clearfix для ie7 можно использовать вот это .clearfix {
    display: inline-block;
    }
    а для IE6 .clearfix {
    height: 1%;
    } вместо zoom?

    • Это на ваше усмотрение.
      Лично я не гонюсь за идеальной валидностью в CSS, если хаков много, то выношу в отдельный файл, а из-за одного-пяти запариваться не буду. Мне кажется, что валидность ради валидности — это перебор. Другое дело валидность в HTML, здесь я стремлюсь к идеальному порядку.

  • В оригинале используется display: table, как раз для того, чтобы не писать overflow: hidden.
    А почему вы выбрали block? Есть какие-то веские причины?

    • Спасибо за подсказку, оригинальный пост обновлен. Я так же поправил.

  • vlad

    что-то вы все свалили в одну кучу. надо уж или hidden, или Table.
    Последний вариант, кстати, жизнеспособен не в FF2+, а в FF 3.5+

    оригинальный код и статья тут:
    http://nicolasgallagher.com/better-float-containment-in-ie/
    https://gist.github.com/935783/

    • Спасибо за ссылку за еще более новый вариант, обновил код.

  • Что за `huck`?

    • disqusashto

      И mikro.