Новый метод Clearfix

Original on: http://perishablepress.com/new-clearfix-hack/

Попрощайтесь с вековым и старым методом clearfix и скажите привет новому и улучшенному методу clearfix.

Метод Clearfix или метод "легкой очистки" представляет собой полезный метод удаления ненужной информации. Я писал об этом и даже предложил . Оригинальный метод clearfix отлично работает, но браузере, что потеряли цели или устарели, также на его пути . В частности, Internet Explorer 5 для Mac теперь уже история, так что нет никаких оснований беспокоиться при использовании метода clearfix в процессе очистки.

Оригинальные методы clearfix выглядят следующим образом:

 . clearfix: after {
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
. Clearfix {display: inline-table;}
/ * Hides from IE-mac \ * /
* Html. Clearfix {height: 1%;}
. Clearfix {display: block;}
/ * End hide from IE-mac * /
 
 

Да, это некрасиво, но работает очень хорошо, позволяя дизайнерам убрать все ненужное, не скрывая переполнения и настройки ширины (почти) все, чтобы получить работу. Логика этого метода звучит примерно так:

• • Целевая совместимость браузеров с первым блоком декларации (если все браузеры были стандартами, это было бы именно то, что нужно) может создать скрытый блок очистки после удержания целевых элементов.
  • Второе заявление относится к inline-tableуласнасци дисплея, исключительного в интересах IE / Mac.
  • На данный момент мы используем обратную косую черту комментарий-метода, чтобы скрыть оставшуюся часть правил с IE / Mac. Это дает нам возможность делать следующее:
  • Ужыванне1% роста только IE 6 для показа hasLayout (что требуется для метода)
  • Ужыцьdisplay: blockда всего, кроме IE / Mac
  • Последний строка является комментарием, который служит для определения метода для IE / Mac

    Как вы можете видеть, возникает много шума из-за браузера, который не работал как минимум последние три или четыре года. Никто больше не использует IE / Mac, так что настало а время отказаться от clearfix. Результатом является гораздо более чистый и более эффективный кусок CSS:

      / * new clearfix * /
    . Clearfix: after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 0;
    }
    * Html. Clearfix {zoom: 1;} / * IE6 * /
    *: First-child + html. Clearfix {zoom: 1;} / * IE7 * /
     
     
    

    Следует отметить также, что IE / Mac чистить вещи просто замечательно. Обратите внимание, что мы еще больше улучшить clearfix, добавив поддержку IE 7. IE 6 или IE 7 поддержка: after псевдо-класса используются в первой декларации, поэтому мы должны искать альтернативный метод нанесения clearfix. Применяя zoom: 1 любой веб-обозреватель, который вызывается IE, является собственностью компании hasLayout механизмов, которая также работает хорошо в области очистки. Для достижения целесообразности, вам необходимо сделать это с двумя настоящими браузерами, но вы должны иметь в виду, что

    IE 8 также поддерживает : after псевдо-класс, так что этот новый метод clearfix только станет более простым, как IE6, в конечном счете IE 7, наконец, отмирают.

    Результат: новый способ очистки, который применяется clearfix, управляет стандартами браузеров, использующих: after псевдо-класс. Для IE 6 и IE 7 новый метод clearfix вызывает hasLayout, характерные для CSS. Таким образом, новый метод Clearfix также эффективно выполняет операции очистки.